Tooltip Examples | あっと夫婦

基本的な使い方

テキストツールチップ

アイコンツールチップ

ヘルプツールチップ

KPI ?

フォームツールチップ

メールアドレス

実装方法

/* HTML */
<button data-tooltip="ツールチップのテキスト">
    ホバーしてください
</button>

/* CSS */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    background: #1e293b;
    color: white;
    font-size: 0.875rem;
    border-radius: 6px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
}

[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 1;
}