Toggle Tip

クリック開閉の小型ヒントです。fandhe-frontend-headless-ui の toggle_tip mod は Root / Trigger / Positioner / Content / Arrow / ArrowTip の 6 anatomy パーツを提供します。見た目は Tooltip（小型・非モーダル）、挙動は Popover（クリックで開閉し明示的に閉じるまで持続）の変種と位置づけられ、trigger は aria-expanded を持ちますが aria-haspopup は付与せず、content も role="tooltip" を持ちません（Tooltip・Popover いずれとも異なる 3 者境界）。

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

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

Demo

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

Click again to dismiss.

Features

Tooltip（hover/focus 由来）・Popover（クリック起点のダイアログ相当）のいずれとも異なる立ち位置を持つ: trigger は aria-expanded と（controls が Some のとき）aria-controls を持つが aria-haspopup は付与せず、content は role="tooltip" を持たない非対話テキストとして扱う（モジュール doc §3 者境界）。
Root / Trigger / Positioner / Content / Arrow / ArrowTip の 6 anatomy パーツと、Disclosure を埋め込んだ開閉状態機械 ToggleTip を提供する。
click-outside dismiss（トリガー外クリックでの自動閉鎖）・Escape 閉鎖はクライアントサイド実行時のイベント処理としてスコープ外。

Anatomy

root
  trigger
  positioner
    content
      arrow
        arrow-tip

API Reference

Arguments

Name	Type	Default	Description
root: state	OpenState	Closed	開閉状態（data-state へ反映）。
trigger: state	OpenState	Closed	aria-expanded/data-state へ反映される開閉状態。
trigger: disabled	bool		ネイティブ disabled 存在属性と data-disabled の両方へ反映する disabled 状態。
trigger: controls	Option<&str>		Some のとき aria-controls で content と関連付ける。
positioner: state	OpenState	Closed	closed のとき hidden 存在属性を付与する配置ラッパーの開閉状態。
content: state	OpenState	Closed	開閉状態（closed のとき hidden 存在属性を付与）。
content: id	Option<&str>		trigger の controls と対で aria-controls 関連付けを成立させる。

Data Attributes

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

Examples

Disabled trigger

disabled な trigger はネイティブ disabled 属性と data-disabled が付与され、フォーカス・展開ができなくなります。

Accessibility

WAI-ARIA

Attribute	Description
aria-expanded	trigger に付与。開閉状態を反映する。
aria-controls	trigger に付与。controls が Some のとき content と関連付ける。
aria-haspopup / role="tooltip"（非付与）	trigger には aria-haspopup を、content には role="tooltip" を付与しない（Tooltip/Popover との違い、モジュール doc §3 者境界参照）。
aria-hidden="true"	arrow/arrow_tip に固定付与（装飾用のみ、スクリーンリーダーの読み上げ対象外）。