コンポーネント
Tooltip
要素にキーボードフォーカスが当たったとき、またはマウスでホバーしたときに、関連情報を表示するポップアップです。
使い方
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@murasakijs/ui";<TooltipProvider>
<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>Add to library</TooltipContent>
</Tooltip>
</TooltipProvider>API リファレンス
サブコンポーネント
| コンポーネント | 説明 |
|---|---|
TooltipProvider | ツールチップを使うツリーをラップします。少なくとも1箇所（例えばアプリのルート付近）に必要で、共有の delayDuration などを設定します。 |
Tooltip | 1つのツールチップのルートプリミティブ。open・defaultOpen・onOpenChange・delayDuration を受け取ります。 |
TooltipTrigger | ツールチップが紐づく要素です。asChild に対応しています。 |
TooltipContent | ポップアップの内容。sideOffset（デフォルト 8）を受け取ります。 |
TooltipPortal | コンテンツを document.body にポータルします。TooltipContent が内部的に使用します。 |
ホバー・フォーカスでの表示、閉じる操作、配置は React Aria Components が提供します。