Toggle Tip

fandhe-frontend-pre-styled-ui の toggle_tip mod が提供するスタイル済み Toggle Tip 部品です。クリック開閉の小型ヒントで、見た目は Tooltip（小型・非モーダル）、挙動は Popover（クリックで開閉し明示的に閉じるまで持続）の変種として位置づけられます。 Tooltip・Popover のいずれとも異なり、trigger / content のいずれにも role="tooltip" を付与しない独自の ARIA 表現を採用しています。

Important

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

Demo

headless-ui の ToggleTip（クリック開閉、role="tooltip" なし）に pre-styled-ui の recipe CSS を適用した静的掲示です。positioner はフロー内配置へ中和しています。

クリックで開閉する補足のヒントテキストです。

Features

クリック開閉の小型ヒント。Root / Trigger / Positioner / Content / Arrow / ArrowTip の 6 anatomy パーツを持つ。
見た目は Tooltip（小型・非モーダル）、挙動は Popover（クリックで開閉し明示的に閉じるまで持続）の変種として位置づけられる。
trigger / content のいずれにも role="tooltip" を付与しない（tooltip・popover 双方と異なる独自の ARIA 表現）。
開閉は Disclosure を埋め込んだ状態機械 ToggleTip が管理する。

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-expanded	trigger に付与。開閉状態を表す（aria-haspopup は付与しない）。
aria-controls	trigger に付与。controls が Some のとき content の id を指す。