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 はフロー内配置へ中和しています。

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 が管理する。

Anatomy

root
  trigger
  positioner
    content

API Reference

Arguments

Name	Type	Default	Description
state	OpenState		開閉状態（Open/Closed）。root/content の data-state へ反映される。

Data Attributes

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

Accessibility

WAI-ARIA

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