Tooltip

fandhe-frontend-pre-styled-ui の tooltip mod が提供するスタイル済み Tooltip 部品です。hover / focus で開く吹き出しヒントで、WAI-ARIA tooltip パターンに従い trigger は aria-describedby で content と関連付けます（aria-expanded/ aria-controls は使いません）。content 側が role="tooltip" を持ちます。

Important

Demo はトリガー起点のオーバーレイ部品を「開いた状態」で固定掲示しています。本来の配置（画面全体を覆う・トリガー直下に重なる）ではページ内の他セクションと重なるため、掲示専用 CSS（assets/pre-styled-ui.css の .pre-styled-showcase スコープ）でページの流れの中へ収めています。実アプリケーションでの overlay 配置は pre-styled-ui の recipe CSS がそのまま担います。

Demo

headless-ui の Tooltip（role="tooltip"、WAI-ARIA tooltip パターン）に pre-styled-ui の recipe CSS を適用した静的掲示です。positioner はフロー内配置へ中和しています。2 つ目のインスタンス（closed）は hidden 属性・data-state="closed" により本文上は非表示です。1 つ目のインスタンス（open）は presence transition が適用されており、対応ブラウザではページ読み込み時にフェードインが実際に発火します。

Features

吹き出しヒント。Root / Trigger / Positioner / Content / Arrow / ArrowTip の 6 anatomy パーツを持つ。
WAI-ARIA tooltip パターンに従い、trigger は aria-describedby で content と関連付ける（aria-expanded / aria-controls は使わない）。content 側が role="tooltip" を持つ。
openDelay / closeDelay（表示・非表示までの遅延タイマー）は wasm-full 側の後続スコープ。
開閉は Disclosure を埋め込んだ状態機械 Tooltip が管理する。
positioner は data-side 属性（top（既定）/ bottom / left / right）で表示位置を切り替えられる（イシュー #2041、shadcn/ui の side prop 相当。fandhe-frontend-wasm-full のハイドレーション下では実座標追従、SSR / no-JS では静的フォールバック、イシュー #2210）。
content の children へテキストと fandhe-frontend-pre-styled-ui::kbd を組み合わせるキーボードショートカット併記パターンが可能（イシュー #2041、shadcn/ui の With Keyboard Shortcut Example 相当。下記 Examples 節参照）。

Anatomy

root
  trigger
  positioner
    content

API Reference

Arguments

Name	Type	Default	Description
`state`	`OpenState`	—	開閉状態（Open/Closed）。root/content の data-state へ反映される。
`positioner の attrs`	`Vec<(&str, &str)>`	—	positioner へ透過する属性。data-side="bottom"/"left"/"right" を渡すと表示位置の静的フォールバックが切り替わる（未指定は top 相当）。fandhe-frontend-wasm-full のハイドレーション下では実測座標へ追従するため、この制約は解消する（イシュー #2210）。SSR / no-JS の静的フォールバックでは、left/right は root 幅が trigger 幅に一致する文脈（flex アイテム等で shrink-wrap される場合）でのみ trigger に隣接する位置になる。

Data Attributes

Part	Attribute	Observed Values
`content`	`data-state`	`closed`, `open`
`positioner`	`data-state`	`closed`, `open`
`root`	`data-state`	`closed`, `open`
`trigger`	`data-state`	`closed`, `open`

CSS Variables

Variable	Default
`--fandhe-tooltip-arrow-rotate`	`225deg`
`--fandhe-tooltip-arrow-x`	`50%`
`--fandhe-tooltip-arrow-y`	`100%`

Examples

With keyboard shortcut

shadcn/ui（Base UI）の With Keyboard Shortcut Example に相当する、content の children へテキストと kbd を組み合わせる合成パターンです。新しい variant や data-* 語彙を追加せず、既存の tooltip::content の自由な children と fandhe-frontend-pre-styled-ui::kbd の既存 API のみで構成しています（Ctrl+P のような複数 kbd 連結〔KbdGroup 相当〕は本リポジトリに対応するラッパーが無いため単一 kbd の再現に留めています）。

Accessibility

WAI-ARIA

Attribute	Description
aria-describedby	trigger に付与。content の id が設定されているときのみ出力される。
role="tooltip"	content に固定付与。