Lily UI
日本語 English

オーバーレイ

HoverCard

トリガーにカーソルを重ねるかフォーカスすると開くカード。補足情報を表示し、開くまで少し待ちます。フォーカスが外れるか Escape で閉じ、キーボードでも開けます。

ReactVueWeb Components
Storybook で見る

プレイグラウンド

使用例

<HoverCard content={<UserSummary id={id} />}>
  <a href={`/users/${id}`}>@lily</a>
</HoverCard>

設定できる項目

名前 型 既定値 説明
content 必須 ReactNode — Rich card content shown on hover/focus.
children 必須 ReactElement<{ 'aria-describedby'?: string; onMouseEnter?: (e: React.MouseEvent) => void; onMouseLeave?: (e: React.MouseEvent) => void; onFocus?: (e: React.FocusEvent) => void; onBlur?: (e: React.FocusEvent) => void; }> — The trigger element. It receives hover/focus handlers and `aria-describedby`; it must be a focusable element so the card is reachable by keyboard.
placement HoverCardPlacement bottom Side the card opens on. @default 'bottom'
openDelay number 200 Delay before opening, in ms. @default 200
closeDelay number 150 Delay before closing, in ms. @default 150
open boolean — Controlled open state.
defaultOpen boolean false Initial open state (uncontrolled). @default false
onOpenChange (open: boolean) => void — Called when the open state changes.
className string —

アクセシビリティ

  • 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
  • マウスがなくても、キーボードだけですべての操作ができます。
  • いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
  • 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。

どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。