Tooltip コンポーネント

ツールチップの基本スタイル。ホバーすると表示される追加情報を提供します。data-tooltip属性にツールチップのテキストを設定します。 .tooltip-base

バリアント

.tooltip-ghost

ゴーストスタイルのツールチップ。背景がなく、ホバー時にテキスト色のみ変化します（ホバー効果は utilities.css で定義推奨）。カラーセレクタと組み合わせて使用します。

.tooltip-outline

枠線スタイルのツールチップ。カラーセレクタと組み合わせて使用します。

.tooltip-solid

塗りつぶしスタイルのツールチップ。カラーセレクタと組み合わせて使用します。

.tooltip-subtle

控えめなスタイルのツールチップ。薄い背景色が適用されます。カラーセレクタと組み合わせて使用します。


							
								<span class="tooltip-base tooltip-sm tooltip-solid theme-neutral" data-tooltip="これは塗りつぶしツールチップです">ホバーしてください</span>


							
								<span class="tooltip-base tooltip-sm tooltip-outline theme-neutral" data-tooltip="これはアウトラインツールチップです">ホバーしてください</span>


							
								<span class="tooltip-base tooltip-sm tooltip-subtle theme-primary" data-tooltip="サブトルツールチップ">ホバーしてください</span>


							
								<span class="tooltip-base tooltip-sm tooltip-ghost theme-primary" data-tooltip="ゴーストツールチップ">ホバーしてください</span>


							
								<span class="tooltip-base" data-tooltip="これはツールチップです">ホバーしてください</span>