コンポーネント一覧
Tooltip
ツールチップだけに情報を置かない。触れないと読めないため、操作に必須の情報は本文かラベルに書く。
デモ
使い分け
こうする
- アイコンだけのボタンの名前や、短い補足に使う
- delay で出るまでの間を調整する
こうしない
- 操作に必要な情報を Tooltip にだけ書かない。タッチ端末では出ない
- Tooltip の中にリンクやボタンを置かない。押せない
Props
| 名前 | 型 | 説明 |
|---|---|---|
| content | ReactNode | |
| placement | NoviPlacement | |
| offset | number | |
| delay | number | 開くまでの遅延（ミリ秒） |
| isOpen | boolean | |
| defaultOpen | boolean | |
| onOpenChange | (isOpen: boolean) => void | |
| isDisabled | boolean | |
| children | ReactNode | |
| classNames | ClassNames<typeof tooltipSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- arrow
- content必須
アクセシビリティ
| キー | 動作 |
|---|---|
| Tab（フォーカス） | 表示 |
| Escape | 隠す |
- ホバーとフォーカスの両方で開く。触れないと読めないため、操作に必須の情報は置かない
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。