ツールチップ Tooltip
要素にホバーまたはフォーカスした時に補足情報を表示する小さな吹き出し。
ライブデモ
上に表示 右に表示 下に表示 左に表示
ソースコード
<div class="demo-tooltip-demo">
<span class="demo-tooltip-target" data-tooltip="これはツールチップです" data-position="top">上に表示</span>
<span class="demo-tooltip-target" data-tooltip="右側のツールチップ" data-position="right">右に表示</span>
<span class="demo-tooltip-target" data-tooltip="下側のツールチップ" data-position="bottom">下に表示</span>
<span class="demo-tooltip-target" data-tooltip="左側のツールチップ" data-position="left">左に表示</span>
</div>.demo-tooltip-demo { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 40px 20px; }
.demo-tooltip-target {
position: relative; padding: 8px 16px; background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
color: var(--ui-primary); border-radius: 8px; font-size: 13px; cursor: default; font-weight: 500;
}
.demo-tooltip-target::after {
content: attr(data-tooltip); position: absolute;
background: #1f2937; color: #fff; font-size: 12px; padding: 6px 10px;
border-radius: 6px; white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 10;
}
.demo-tooltip-target::before {
content: ""; position: absolute; width: 0; height: 0;
pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
.demo-tooltip-target[data-position="top"]::after { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(4px); margin-bottom: 6px; }
.demo-tooltip-target[data-position="top"]::before { bottom: 100%; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #1f2937; margin-bottom: 1px; }
.demo-tooltip-target[data-position="bottom"]::after { top: 100%; left: 50%; transform: translateX(-50%) translateY(-4px); margin-top: 6px; }
.demo-tooltip-target[data-position="bottom"]::before { top: 100%; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #1f2937; margin-top: 1px; }
.demo-tooltip-target[data-position="right"]::after { left: 100%; top: 50%; transform: translateY(-50%) translateX(-4px); margin-left: 6px; }
.demo-tooltip-target[data-position="right"]::before { left: 100%; top: 50%; transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #1f2937; margin-left: 1px; }
.demo-tooltip-target[data-position="left"]::after { right: 100%; top: 50%; transform: translateY(-50%) translateX(4px); margin-right: 6px; }
.demo-tooltip-target[data-position="left"]::before { right: 100%; top: 50%; transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #1f2937; margin-right: 1px; }
.demo-tooltip-target:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.demo-tooltip-target[data-position="right"]:hover::after { transform: translateY(-50%) translateX(0); }
.demo-tooltip-target[data-position="left"]:hover::after { transform: translateY(-50%) translateX(0); }
.demo-tooltip-target:hover::before { opacity: 1; }
@media (max-width: 767px) { .demo-tooltip-demo { flex-direction: column; align-items: center; padding: 24px 16px; gap: 20px; } }AIプロンプト
Basic
ツールチップをHTML/CSSで作ってください。要素にマウスを乗せると説明テキストが表示されます。
Custom
以下の仕様でツールチップを実装してください。 - 4方向対応（上下左右） - プライマリカラー: #2563eb（背景色として使用） - 矢印（三角形）付き - フェードイン/アウトアニメーション - 最大幅200px（長いテキストは折り返し） - data-tooltip属性で簡単に設定可能
Advanced
高機能ツールチップを実装してください。 - 自動位置調整（画面端ではフリップ） - 遅延表示/非表示（enterDelay, leaveDelay） - リッチコンテンツ（HTML対応） - role="tooltip" + aria-describedby - フォーカスでも表示（マウスだけでなく） - タッチデバイスではタップで表示/非表示 - PopperJS不要の自作ポジショニング - 仮想DOMとの統合対応（useRef） - Portalレンダリング（オーバーフロー問題回避）