はじめに 🌟
Fluent UI 2 の Tooltip は、対象要素の近くに補足的な文脈情報を出すための軽量な UI です。小さな部品ですが、使いどころを誤ると「読まないと操作できない説明」を埋め込んでしまい、かえって分かりにくい UI になります。特に Tooltip は、アクセシビリティと文言設計の良し悪しがそのまま品質に出やすいコンポーネントです。♿
本記事では、Fluent UI 2 Tooltip usage と Fluent UI Blazor 5 Tooltip をもとに、Tooltip の役割、Popover との違い、Fluent UI Blazor 5 の FluentTooltip との違いを整理します。特に、アクセシビリティとコンテンツの書き方を重視して見ていきます。📝
Fluent UI 2 とは 🎨
Fluent UI 2 は、Microsoft の Fluent 2 デザインシステムに沿って UI を設計・実装するためのガイドラインとコンポーネント群です。単に見た目をそろえるためのライブラリではなく、情報の優先順位、操作の一貫性、アクセシビリティ、コンテンツ設計まで含めて扱う点に特徴があります。
Tooltip もこの考え方の中で理解すると分かりやすいです。Tooltip は「何でも説明を足せる箱」ではなく、主 UI を邪魔せずに、非必須の補助情報だけを添えるための表現として位置付けられています。だからこそ、Popover や Dialog との境界を先に決めることが重要です。✨
これまでの Fluent UI 2 シリーズ記事一覧 📚
本記事執筆時点のシリーズ記事をまとめて載せます。公開済みの記事は Qiita へのリンク、未公開のものは draft として記載します。🧭
- Fluent UI / Fluent 2 で raw 値より alias token を使うべき理由 ─ アクセシビリティ運用を強くする設計
- Fluent UI 2 で始めるアクセシビリティ実装 — キーボード操作・支援技術・WCAG 2.1 の実践ガイド
- Fluent UI 2 の Accordion を理解する — 情報設計・アクセシビリティ・React 実装
- Fluent UI 2 の Avatar を整理しつつ Fluent UI Blazor 5 でどう実装するか
- Fluent UI 2 の Badge を理解する — Fluent UI Blazor 5 との比較と実装ポイント
- Fluent UI 2 の Breadcrumb を理解する — Fluent UI Blazor 5 との対応とアクセシビリティ
- Fluent UI 2 の Button を理解する — 種類・レイアウト・アクセシビリティ・Blazor 5 比較
- Fluent UI 2 の Card を理解する — React と Fluent UI Blazor の違い
- Fluent UI 2 の Checkbox を理解する — React と Fluent UI Blazor v5 の違い
- Fluent UI 2 の Combobox を理解する — Fluent UI Blazor 5 との比較と使い分け
- Fluent UI 2 の Dialog を理解する — React と Fluent UI Blazor 5 の違いと使い分け
- Fluent UI 2 の Divider を理解する — Fluent UI Blazor 5 との比較
- Fluent UI 2 の Drawer を理解する — Tooltip / Popover / Dialog との使い分けと Fluent UI Blazor 5 比較
- Fluent UI 2 の Dropdown を理解する — Fluent UI Blazor 5 の近縁コンポーネント比較とアクセシビリティ
- Fluent UI 2 の Field を理解する — Fluent UI Blazor 5 と比較する入力設計の基礎
- Fluent UI 2 の Icon を理解する — Fluent UI Blazor の FluentIcon 比較とアクセシビリティ
- Fluent UI 2 の Image を理解する — Fluent UI Blazor 5 と比較しながらレイアウトとアクセシビリティを整理する
- Fluent UI 2 の Input を理解する — Textarea・Fluent UI Blazor TextInput / Number 比較とアクセシビリティ
- Fluent UI 2 の Label を理解する — Fluent UI Blazor 5 と比較するラベル設計の基礎
- Fluent UI 2 の Link を理解する — Fluent UI Blazor 5 と比較するリンク設計とアクセシビリティ
- Fluent UI 2 の Menu を理解する — Fluent UI Blazor 5 と比較するガイダンス・動作・アクセシビリティ
- Fluent UI 2 の MessageBar を理解する — Fluent UI Blazor 5 と比較する機能・使用方法・アクセシビリティ
- Fluent UI 2 の Nav を理解する — ガイダンス・動作・レイアウト・アクセシビリティと Fluent UI Blazor 5 比較
- Fluent UI 2 の Persona を理解する — ガイダンス・レイアウト・アクセシビリティ・Fluent UI Blazor 5 比較
- Fluent UI 2 の Popover を理解する — Fluent UI Blazor 5 との比較と Tooltip / Dialog の使い分け
- Fluent UI 2 の Radio Group を理解する — Fluent UI Blazor 5 との比較・使い分け・アクセシビリティ
- Fluent UI 2 の Rating を理解する — Fluent UI Blazor 5 と比較する評価 UI の設計とアクセシビリティ
- Fluent UI 2 の Searchbox を理解する — Fluent UI Blazor 5 との比較とアクセシビリティ・コンテンツ設計
- Fluent UI 2 の Spin button を理解する — Slider との違い、Fluent UI Blazor 5 の Number / StepButtons 比較とアクセシビリティ（draft）
- Fluent UI 2 の Switch を理解する — Checkbox との違い、即時適用、アクセシビリティ実装
- Fluent UI 2 の Tablist を理解する — Link / Button との違い、Fluent UI Blazor Tabs 比較、アクセシビリティとコンテンツ設計（draft）
- Fluent UI 2 の Tag を理解する — Badge との違い、Fluent UI Blazor 5 での実装戦略とアクセシビリティ
- Fluent UI 2 の Tag picker を理解する — ガイダンス・レイアウト・アクセシビリティ・コンテンツ設計・Fluent UI Blazor 5 との違い（draft）
- Fluent UI 2 の Text を理解する — Link との違い・プリセット・アクセシビリティ・Fluent UI Blazor 5 との比較
- Fluent UI 2 の Textarea を理解する — Input との違い・ガイダンス・アクセシビリティ・Fluent UI Blazor 5 比較
- Fluent UI 2 の Toast を理解する — Dialog / Field / MessageBar との違い・アクセシビリティ・Fluent UI Blazor 5 比較（draft）
- Fluent UI 2 の Toolbar を理解する — Fluent UI Blazor 5 AppBar / Nav 比較とアクセシビリティ・コンテンツ設計（draft）
- Fluent UI 2 のアクセシビリティを色から読む ─ WCAG 2.1 と対比しながら整理する
Tooltip もこの流れの中で見ると、単独の部品というより、周辺コンポーネントと役割を分担する設計要素だと捉えやすくなります。次は Popover と比べて境界線をはっきりさせます。🪟
Tooltip と Popover の違い
Tooltip と Popover はどちらも補足情報を扱いますが、役割は同じではありません。いちばん大きな違いは、Tooltip は非必須のプレーンテキスト向けで、Popover は構造化された内容や軽い操作まで扱えるという点です。✨
| 観点 | 🏷️ Tooltip | 🪟 Popover |
|---|---|---|
| 主な役割 | 対象要素の近くに補足情報を添える | 文脈を保ったまま小さなサーフェスで補足する |
| 内容の性質 | 非必須のプレーンテキスト | 非必須の構造化コンテンツ |
| 対話性 | 想定しない | インタラクティブな内容も扱える |
| 向いている場面 | ラベル補足、短い説明、操作意図の補足 | 詳細説明、書式付き情報、軽い操作 |
| 向いていない場面 | 書式付き情報、複雑な説明、操作 | 必須情報、ページを止めるべき判断 |
Fluent UI 2 の Tooltip usage では、よりしっかりした書式付き情報が必要なら Popover を使うとされています。一方で Popover も非必須の範囲にとどめるべきです。重要確認や中断を伴う判断なら Dialog のほうが適切です。まずこの境界線を決めると、Tooltip に入れるべき内容がかなり明確になります。✅
Fluent UI 2 Tooltip と Fluent UI Blazor 5 Tooltip の違い
Fluent UI 2 の Tooltip usage は、主にいつ Tooltip を使うべきかという設計判断を示しています。一方、Fluent UI Blazor 5 の FluentTooltip は、Blazor でどう実装するかに寄った API を提供しています。前者はガイドライン、後者は実装手段として読むと整理しやすいです。🔧
| 観点 | Fluent UI 2 Tooltip | Fluent UI Blazor 5 FluentTooltip
|
|---|---|---|
| 主眼 | 使いどころと文言設計 | 表示方法とカスタマイズ |
| 基本用途 | 非必須のプレーンテキスト補足 | 別コンポーネントの近くに追加情報を表示 |
| 基本的な関連付け | 対象と Tooltip を関係付ける考え方が中心 |
Anchor に対象コンポーネントの Id を指定 |
| 位置制御 | 近接配置の原則を示す |
Positioning で位置指定 |
| 便利機能 | usage ガイド中心 | 多くのコンポーネントで Tooltip パラメーターを利用可能 |
| カスタマイズ | 文言と配置の方針が中心 |
Delay Positioning MaxWidth SpacingHorizontal SpacingVertical Style OnToggle OnDismissed
|
| 既定値の把握 | 既定ではターゲットから 4px 離す | 既定の MaxWidth は 240px、既定の spacing は 4px |
| インタラクティブ内容 | 想定しない | 想定しない。必要なら展開ボタン + Popover を検討 |
| 全体設計 | 使用境界の明確化 |
ITooltipService / FluentTooltipProvider による全体運用が可能 |
Fluent UI Blazor 5 で特に押さえたいのは、Tooltip を個別部品として置くだけでなく、サービスとして運用できる点です。ドキュメントでは ITooltipService を使い、MainLayout.razor の末尾付近に <FluentTooltipProvider /> を置くことが勧められています。これにより、グローバルオプションで Tooltip 定義を生成し、HTML の末尾に出力して z-index レベルを扱いやすくできます。必要に応じて UseTooltipService で provider ベースの描画を無効にもできます。🧩
また、Blazor 側では多くのコンポーネントに Tooltip パラメーターがあるため、「専用の FluentTooltip を毎回アンカーでつなぐ」方法と「コンポーネント側の便利パラメーターを使う」方法を選べます。ただし、便利に書けることと、Tooltip に入れてよい内容であることは別問題です。ここは Fluent UI 2 の usage を先に見ておくと判断しやすいです。📝
Fluent UI Blazor 5 の基本例
FluentTooltip を直接使う場合は、対象コンポーネントの Id と Anchor を対応させます。
<FluentButton Id="tooltip-target">Hover me</FluentButton>
<FluentTooltip Anchor="tooltip-target">
This is the description of the button
</FluentTooltip>
一方で、対応コンポーネントでは Tooltip パラメーターを使って簡潔に書くこともできます。
<FluentButton Tooltip="This is the description of the button">
Hover me
</FluentButton>
ガイダンス
Tooltip の役割をひと言で言うなら、対象要素の近くに出す補足的で文脈依存の説明です。ここで大事なのは「補足的」であることです。主情報や必須情報を Tooltip に押し込めてはいけません。⚠️
実務では、次の基準で判断すると迷いにくいです。
| 判断軸 | 推奨 | 避けたい使い方 |
|---|---|---|
| 🧭 情報の重要度 | あると助かる非必須情報 | 読まないと完了できない説明 |
| 📝 内容形式 | プレーンテキスト | 書式が多い説明、複雑な構造 |
| 🔔 用途 | 文脈補足 | システムフィードバック |
| 🪟 代替手段 | より厚い説明は Popover | Tooltip に全部詰め込む |
Tooltip はシステムフィードバックに使わないほうがよいです。成功・失敗・警告の通知は、Tooltip ではなく別のサーフェスで扱うべきです。
また、レイアウトが混み合っている場面では、Tooltip の存在が見えにくくなることがあります。その場合は、追加情報があることを示す info button を使う判断も有効です。見えにくい Tooltip を増やすより、存在を明示したほうが親切なことがあります。👀
動作
Fluent UI 2 の Tooltip は、hover または focus で表示され、blur または mouse-out で閉じます。閉じる条件はターゲット要素だけでなく、Tooltip コンテナーからマウスが外れたときも含まれます。つまり Tooltip は、短く現れて短く消える前提の軽い補助 UI です。⚡
この挙動から分かるのは、Tooltip を「読ませる場所」にしてはいけないということです。長い説明や順序だった説明は、表示時間や読み始めの安定性の面でも Tooltip と相性がよくありません。短く、要点だけに絞るほうが自然です。✂️
Blazor 5 でも Delay を調整できますが、Delay はあくまで体験の微調整です。Tooltip に長文を入れて Delay で解決しようとするのではなく、コンテンツの粒度そのものを見直すほうが先です。⏱️
レイアウト
Fluent UI 2 では、Tooltip は既定でターゲットから 4px 離して配置されます。小さなオフセットですが、この「近すぎず、離れすぎない」距離感が Tooltip の文脈性を支えています。必要に応じて配置は調整できますが、関連対象が一目で分かることを優先したいです。📍
さらに、矢印を使う場合はターゲットを指すべきとされています。Tooltip の意味は「何に対する補足か」が瞬時に分かることにあるので、関連性が曖昧な配置は避けたいです。忙しいレイアウトでは、Tooltip 自体の位置だけでなく、そもそも info button を置いたほうが明快な場合もあります。🧭
Fluent UI Blazor 5 側でも、Positioning、SpacingHorizontal、SpacingVertical、MaxWidth で調整できます。既定の spacing は 4px、既定の MaxWidth は 240px です。Fluent UI 2 の近接配置の考え方と、Blazor 側の既定値はかなり相性がよいので、まずは既定値を起点にし、遮蔽や窮屈さがあるときだけ調整するのが扱いやすいです。📐
アクセシビリティ ♿
Tooltip でまず押さえたいのは、スクリーンリーダー利用者に対象との関係が伝わることです。Fluent UI 2 では、Tooltip と対象要素を id と aria-describedby で結び付けることが案内されています。視覚的に近くへ出すだけでは不十分で、支援技術にも「この補足はこの要素の説明です」と伝える必要があります。🔗
また、Tooltip は hover だけでなく focus でも出る前提です。これは、マウス利用者だけでなくキーボード利用者にも補助情報を届けるうえで大切なポイントです。逆に言うと、Tooltip の設計を hover 中心の感覚だけで決めてしまうと、アクセシビリティの観点が抜け落ちやすくなります。⌨️
さらに重要なのは、Tooltip に載せる内容そのものです。冗長で重複した説明は、支援技術でも読み負荷になります。追加情報であること、簡潔であること、対象の理解に本当に寄与することが必要です。アクセシビリティは属性だけでなく、文言設計まで含めて完成します。✨
Fluent UI Blazor 5 を使う場合も、この原則は変わりません。Tooltip パラメーターや FluentTooltipProvider は実装を楽にしますが、アクセシブルな説明になるかどうかは、最終的に Tooltip の文言と関係付けをどう設計するかにかかっています。🧩
コンテンツ ✍️
Tooltip のコンテンツ設計は、このコンポーネントの成否を決めます。Fluent UI 2 では、内容は追加情報であり、冗長であってはならず、必要最小限に絞ることが明確に示されています。私は Tooltip の品質はここでほぼ決まると感じています。🌟
まず守りたい原則を表にまとめます。
| 観点 | 推奨 | 避けたい例 |
|---|---|---|
| ➕ 追加性 | 本文やラベルにない補足を足す | 目の前の文言をそのまま繰り返す |
| ✂️ 長さ | 必要最小限のプレーンテキスト | 長文、複数段落、説明の完全版 |
| 🧩 構造 | 単純な文章や句 | 構造化情報や対話的内容 |
| 🎯 目的 | 操作意図や状態理解を助ける | 使い方の本編を押し込む |
次に、書き分けのルールです。
| 状況 | 書き方 | 例 |
|---|---|---|
| 🏷️ ラベルのないコンポーネント | 単純な名詞句、sentence case、終止句読点なし | 設定 |
| ✅ 有効なコンポーネント | その操作で何ができるかを表す | このファイル内のテキストを検索 |
| ⛔ 無効なコンポーネント | 何を満たせば有効になるかを説明する | 必須項目を入力すると保存できます。 |
ここで細かいですが大事なのが、完全な文だけに句点を使うという考え方です。短い名詞句や短い機能説明にまで句点を付けると、Tooltip が重く見えやすくなります。一方で、無効状態の理由説明のように文として完結したほうが分かりやすい場合は、自然な文章にしたほうが伝わります。🪶
そしてもうひとつ大事なのは、Tooltip を「不足したラベルの代用品」にしないことです。ラベルが弱い UI を Tooltip で補おうとすると、見える人と見えない人、hover できる人とできない人で理解差が生まれやすくなります。Tooltip はあくまで補足です。主情報は主情報として、画面上にきちんと置いておきたいです。✅
まとめ
Fluent UI 2 の Tooltip は、非必須のプレーンテキスト補足に絞って使うと強いコンポーネントです。反対に、重要説明、システムフィードバック、構造化情報、対話的内容まで載せ始めると、Popover や Dialog と役割が衝突しやすくなります。🧭
実務で特に押さえたいポイントは次の 4 つです。
- Tooltip は補足であり、主情報ではない
- Tooltip はプレーンテキスト中心で、簡潔に書く
- スクリーンリーダーには
idとaria-describedbyで関係を伝える - Fluent UI Blazor 5 では
TooltipパラメーターやFluentTooltipProviderが便利でも、内容の適切さは別途判断する
Tooltip は小さな部品ですが、情報設計とアクセシビリティの姿勢がそのまま表れます。Popover との境界を先に決め、文言を削ぎ落とし、必要な補足だけを置く。この順序で設計すると、かなり扱いやすくなるはずです。🌈