Hover Card

リンク先プレビュー等、hover / focus で開閉するオーバーレイです。 fandhe-frontend-headless-ui の hover_card mod は Root / Trigger / Positioner / Content / Arrow / ArrowTip の 6 anatomy パーツを提供します。 trigger はリンク先プレビュー用途の a 要素であり、HoverCardDelays （open_ms/close_ms、ark-ui 既定の 600/300 ms）を data-open-delay/ data-close-delay として決定的に出力します。WAI-ARIA に hover card 専用パターンは存在しないため、aria-expanded/aria-controls/aria-haspopup 及び固定 role を一切付与しません（Tooltip との違い）。

スタイル済みの表示例は Hover Card を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

@example

Example user profile preview.

Features

Root / Trigger / Positioner / Content / Arrow / ArrowTip の 6 anatomy パーツと、Disclosure を埋め込んだ開閉状態機械 HoverCard を提供する。trigger はリンク先プレビュー用途の a 要素であり、Tooltip とはこの点が異なる。
HoverCardDelays（open_ms 既定 600 / close_ms 既定 300、ark-ui 既定値）を data-open-delay/data-close-delay（10 進の ms 値のみ）として決定的に出力する。実際の hover/focus タイマー駆動は wasm-full 側の責務でスコープ外。
WAI-ARIA に hover card 専用パターンが存在しないため、aria-expanded/aria-controls/aria-haspopup 及び content への固定 role を一切付与しない（Tooltip/Popover との違い）。

Anatomy

root
  trigger
  positioner
    content
      arrow
        arrow-tip

API Reference

Arguments

Name	Type	Default	Description
root: state	OpenState	Closed	開閉状態（data-state へ反映）。
root: delays	HoverCardDelays	HoverCardDelays::default()（open_ms: 600, close_ms: 300）	data-open-delay/data-close-delay（10 進の ms 値のみ）へ反映される遅延設定。
trigger: state	OpenState	Closed	data-state へ反映される開閉状態。
trigger: href	Option<&str>		Some のときのみ href 属性を出力する（リンク先プレビュー用途）。
positioner: state	OpenState	Closed	closed のとき hidden 存在属性を付与する配置ラッパーの開閉状態。
content: state	OpenState	Closed	開閉状態（closed のとき hidden 存在属性を付与）。
content: id	Option<&str>		呼び出し側が任意に使える id（本モジュールは固定の aria-describedby を配線しない）。

Data Attributes

Part	Attribute	Observed Values
content	data-state	open
positioner	data-state	open
root	data-close-delay	300
root	data-open-delay	600
root	data-state	open
trigger	data-state	open

Examples

Custom delays

open_ms/close_ms を既定値（600/300）から変更し、開くまでの遅延を短く・閉じるまでの遅延を長くした例です。

@team

Opens fast, lingers longer before closing.

Accessibility

WAI-ARIA

Attribute	Description
aria-expanded / aria-controls / aria-haspopup（非付与）	WAI-ARIA に hover card 専用パターンが無いため、trigger には付与しない。
role（非付与）	content にも固定 role を付与しない。
aria-hidden="true"	arrow/arrow_tip に固定付与（装飾用のみ、スクリーンリーダーの読み上げ対象外）。