Tooltip
daisyUI 5 の tooltip class を wrap した no-JS / pure CSS のホバーチップ。trigger を slot に入れ、本文は text prop で渡す。position (top/right/bottom/left)・color (light default + 8 variants 含む neutral)・open (常時表示) の 3 props。
default position=top, color=null (light: base-100 + 細い border + soft shadow), open=false — trigger を hover で表示
Hi from tooltip
positions — top / right / bottom / left
上に出る
右に出る
下に出る
左に出る
それぞれ hover すると指定方向に tooltip が出ます。
surface variants — base-100 / base-200 (= default) / base-300 を選択肢として比較。背景面に応じて使い分けたい時に
base-100 (hairline ring)
base-200 (= default)
base-300 (more contrast)
color variants — open=true で常時表示して比較 (default=light が先頭、neutral=daisyUI 素の dark grey)
default (light)
neutral
primary
secondary
accent
info
success
warning
error
open state — hover (default) vs 常時表示 (open=true)
hover で出る
常時表示
real-world examples — icon button / disabled / form helper / 長文
icon button (close)
閉じる
お気に入りに追加
通知を確認
disabled の理由を説明
フォームを保存するには必須項目を入力してください
フォームラベル横ヘルプ
長文を hover で全文表示
これは省略されている長いメッセージの全文です…
これは省略されている長いメッセージの全文です。tooltip は折り返し表示されます。
使い方
{{-- 最小 (position=top, color=light default) --}}
<x-tooltip text="Hi">
<button class="btn">Hover me</button>
</x-tooltip>
{{-- position: top (default) / right / bottom / left --}}
<x-tooltip text="右に出る" position="right">
<button class="btn">...</button>
</x-tooltip>
{{-- color: light (default) / neutral / primary / secondary / accent / info / success / warning / error --}}
<x-tooltip text="保存しました" color="success">
<button class="btn">...</button>
</x-tooltip>
{{-- neutral = daisyUI 素の dark grey bubble (light default を opt-out したい時) --}}
<x-tooltip text="dark grey" color="neutral">
<button class="btn">...</button>
</x-tooltip>
{{-- open=true で常時表示 (オンボーディング / 注目箇所のハイライト) --}}
<x-tooltip text="ここを押してください" :open="true" color="primary">
<button class="btn">Start</button>
</x-tooltip>
{{-- icon button + tooltip でラベルを補う --}}
<x-tooltip text="閉じる">
<button class="btn btn-circle btn-ghost" aria-label="close">
<x-i type="close-circle" variant="linear" class="w-5 h-5" />
</button>
</x-tooltip>