ツールチップ
React Aria に組み込まれた光面ツールチップ - それはホバーとフォーカスで開き、フリップは画面上にとどまり、そのトリガーで注意点をポイントし、ブラー + スケールを 0.9 から 方法の途中でアウトします。 下のボタンのいずれかをフーバーします。
ポジション
ツールチップは、そのトリガーの任意の側に座ることができます - 設定 placement プロップオン Tooltip とりあえず top (デフォルト), bottom, left または right. 注意とブールインの変換がマッチするように回転し、React Ariaは画面に部屋がない場合、反対側に自動的に反転します。下のボタンをフーバーします。
すべてのツールチップは、両側に関係なく、同じ方法を開きます:あなたはホバーまたはキーボードに焦点を当てます TooltipTrigger. トリガーの最初の子供は、あなたがポイントするものです(ここでは、) Button、包まれる Focusable です。 <button> 有効なトリガーになります)、および Tooltip 一方、それはポップアップです。だから、左側のツールチップはちょうど placement="left" - 相互作用の変更について何も:
<TooltipTrigger delay={0}> <Focusable> <Button variant="secondary">Top</Button> </Focusable> <Tooltip placement="top">Top</Tooltip></TooltipTrigger>インストール
CLI または手動でこのツールチップコンポーネントを追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add tooltip共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
サイズ
ツールチップは2サイズです。 sm (12pxキャプション1、デフォルト - 貢献ヒートマップで使用される) md (14px ボディ 1、スペーシャリアパディング付き)。 変更による切り替え size プロップオン Tooltip - 比較して下さい 小 そして、 中 上記のプレビューでトリガーします。
<Tooltip size="sm">12 contributions on April 26</Tooltip>コンテンツの表
ツールチップが組み込まれています React Ariaトリガーの単一子はフォーカス可能なコンポーネントである必要があります(react-aria) Button、または使用しているもの useFocusable)。Hoverおよびキーボードは両方それを開けます、 Escape それを閉じて、トリガーが取得します aria-describedby ツールチップに自動的に配線されます。次のトピックをカバーします。
- 基本的なツールチップ
- 配置とケア
- 矢印&オフセットプロップ
- オープン/クローズ遅延
- Blur-and-scale 移行
実際の使用のために、正方形をホバーします ContributionsCard - すべてのセルは、 TooltipTrigger 日付とカウントを表示します。