コンポーネント一覧
Popover
中に入力欄や操作を置ける。読むだけの補足なら Tooltip の方が軽い。
デモ
使い分け
こうする
- トリガーに関係する短い補足や小さな操作に使う
こうしない
- ホバーで出さない。押して出す（Tooltip と混同しない）
- 必ず読ませたい内容を入れない。Modal にする
Props
| 名前 | 型 | 説明 |
|---|---|---|
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| placement | NoviPlacement | |
| offset | number | |
| isOpen | boolean | |
| defaultOpen | boolean | |
| onOpenChange | (isOpen: boolean) => void | |
| children | ReactNode | |
| classNames | ClassNames<typeof popoverSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- arrow
- content必須
アクセシビリティ
| キー | 動作 |
|---|---|
| Enter / Space（トリガー） | 開く |
| Escape | 閉じてトリガーへ戻る |
- Escape で閉じ、フォーカスはトリガーへ戻る
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。