Tooltip
fandhe-frontend-wireframe-ui の吹き出しのプレースホルダーです。本文 + 三角形の指示子(矢印)からなる、画面設計図で「ここに補足の吹き出しが出る」という配置を示すための部品です。API は tooltip(label, side, size) の 3 引数です(詳細は下の引数表を参照)。
原案の参考: blocks.pm の Tooltip カタログ(ライセンス上の理由でスクリーンショットは掲載しません)。
本部品は表示専用のため、実際にホバー・フォーカスで開閉する tooltip としては出力しません。実際に操作できる tooltip が必要な場合は Tooltip(Themes)・Tooltip(Primitives) を検討してください。
Demo
4 方向(既定 Md)
補足説明
補足説明
補足説明
補足説明
Sm / Lg
補足説明
補足説明
長文の折り返し
この吹き出しは本文が長い場合の折り返しを示すためのサンプルテキストです。最大幅を超えると複数行に折り返されます。
対象要素との組み合わせ例(吹き出しを上、対象を下)
保存する
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| label | &str | - | 吹き出しの本文。 |
| side | TooltipSide | TooltipSide::Top | 吹き出しが対象のどちら側に出るか(top/right/bottom/left)。矢印は反対側の辺に付く。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。 |
原案差分メモ
- blocks.pm の Figma プロパティは書き写さない: ライセンス保留(
docs/design/wireframe-ui-architecture.md§2)により、blocks.pm 側の Size / Pointer / Text プロパティ構成は転写せず、§6 の汎用変換規約と本リポジトリの Themes/Primitives Tooltip が既に持つsideの語彙から独立に設計しました。 sideは「吹き出しが対象のどちら側に出るか」:TooltipSideは Themes のside(Floating UI 相当)と同じ意味で、矢印は反対側の辺から対象の方を向いて出ます(例:Topのとき吹き出しは対象の上に出て、矢印は吹き出しの下辺から下向きに出ます)。名前を「矢印がどの辺に付くか(Pointer)」にしなかったのは、blocks.pm の Figma プロパティ名をそのまま写すことになりかねないのと、本リポジトリ既存のsideと意味が逆になり混乱を招くためです。- 対話セマンティクスは一切出力しない:
role="tooltip"・aria-*(aria-describedby等も含む)・title属性を出力しません。対象要素(トリガー)へのスロットや、対象への位置合わせ(Floating UI 相当の計算)も持ちません。位置計算は wasm-full の責務であり、本部品は「吹き出しの見た目」だけを表します。対象と組み合わせた配置イメージは Demo の最後の例のようにstack/button等との合成で示します。 - 方向は
data-*ではなく修飾 class で表す: 方向は表示状態ではないため、fw-wire-tooltip-side-<top|right|bottom|left>の修飾 class で表します(frameのfw-wire-frame-borderedと同じ扱い)。 - 配色はグレースケール: 黒塗り二値ではなく
--fw-wire-ink-mutedの地に--fw-wire-paperの文字(コントラスト比はおよそ 7:1)で表し、読みやすさを優先します。 - 責務外の軸:
Bold/Primary/Disabled/Active・アイコンスロットは持ちません。吹き出しは常に単一の反転配色で表し、強調のバリエーションや無効・選択といった表示状態を持たせる必要がないためです。