Tooltip
hover や focus が可能な trigger のための短い非インタラクティブな説明です。
主なプロパティ
Provider は関連する trigger group 全体の開閉 delay を調整します。
Root は defaultOpen または制御付き open/onOpenChange 状態に対応し、
Positioner は side、alignment、offset、collision 処理を担当します。popup content は
補助的かつ非インタラクティブにし、action は TRPopover または TRDialog に置きます。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/tooltip.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRTooltip } from '@tinyrack/ui/components/tooltip';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
アクセシブルなアイコン説明 パーマリンク
アイコンボタンは、ツールチップの内容に依存しないアクセシブル名を保持します。このプレビューは、反転色の背景と矢印を確認できるよう、開いた状態で開始します。
例
配置する側 パーマリンク
各トリガーをホバーまたはフォーカスして、指定した側を比較します。優先側の空間が足りない場合は、衝突回避によってツールチップが反対側へ移動することがあります。
collision に安全な長いコンテンツ パーマリンク
初期状態で開くツールチップは長い運用文を折り返し、右側の優先位置に収まらない場合は利用可能なビューポート幅を使用します。
Provider の遅延 group パーマリンク
状態コントロールを順番にホバーまたはフォーカスします。Provider はグループに 500ms の初期遅延と、余裕を持たせた 100ms の終了遅延を適用します。
共有 handle と viewport パーマリンク
外部トリガーが、ペイロードを扱う Root を共有します。アクティブなトリガーのコンテンツが変わるときは、Viewport がトランジション用コンテナーを提供します。
API
Base UI が hover/focus timing、accessible description の接続、portal positioning、
collision 処理、Escape による閉じを担当します。すべての compound part と
prop/state type は @tinyrack/ui/components/tooltip から export され、対応する CSS は
opt-in のままです。icon-only trigger には独自の aria-label を付け、タッチユーザーは
content を hover できないため、tooltip だけを必須情報の唯一の出所にしないでください。
Provider は delay group を調整し、Root は state を所有します。Trigger は
mouse hover または keyboard focus で開きます。Portal は portal container を選び、
Positioner は配置と collision を処理します。Popup は role="tooltip" の
accessible description で、Arrow は trigger を指します。Viewport は複数の
trigger が共有する content を切り替えます。createHandle は分離した trigger を
payload-aware root に接続します。Escape は focus を動かさず閉じ、touch press では
tooltip は開きません。