ToolTip Overlays

ToolTip はカーソルをコントロールの上にホバーしたときに表示される小さなポップアップです。任意のコントロールに添付プロパティで追加でき、テキストだけでなく任意の WPF コンテンツを表示できます。

概要

WPF の ToolTip は ContentControl を継承したコントロールで、ほぼすべての UI 要素に ToolTip 添付プロパティで簡単にツールチップを追加できます。シンプルなテキストのツールチップは文字列を直接設定するだけです。

リッチなツールチップを表示したい場合は、<ToolTip> 要素を展開して、その中に任意の WPF 要素（Image、StackPanel、TextBlock など）を配置できます。これにより、アイコン＋説明テキストや書式付きの詳細情報を含むツールチップを実装できます。

表示タイミングは ToolTipService の添付プロパティで細かく制御できます。ToolTipService.InitialShowDelay（ツールチップが表示されるまでの遅延時間）、ToolTipService.ShowDuration（表示を維持する時間）、ToolTipService.BetweenShowDelay（連続表示の間隔）などを設定できます。

コントロールが無効（IsEnabled="False"）の状態でもツールチップを表示するには、ToolTipService.ShowOnDisabled="True" を設定します。なぜそのボタンが無効なのかを説明するのに便利です。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`ToolTip`	`string または ToolTip オブジェクト`	ツールチップのコンテンツを設定します。シンプルな説明文には文字列を直接設定する形式が手軽で、アイコンや書式付きテキストを表示したいときは `<ToolTip>` 要素を展開してカスタムコンテンツを配置する形式を使います。文字列形式では設定した値がそのまま画面に表示されますが、内部的にはその都度 ToolTip オブジェクトが生成されます。複雑なコンテンツを繰り返し表示する場合は StaticResource や DataTemplate を使ってオブジェクトの再生成を避け、パフォーマンス上の問題を防ぐことを推奨します。
`InitialShowDelay (ToolTipService)`	`int (ms, デフォルト: 400)`	カーソルをホバーしてからツールチップが表示されるまでの遅延時間（ミリ秒）を設定します。デフォルトの 400ms は Windows のシステム設定に準拠した値で、一般的なアプリでは適切です。マウスホバーを頻繁に行うプロフェッショナル向けツールでは 100〜200ms 程度に短縮するとレスポンスが向上します。ただし 0 に設定するとツールチップが即座に表示されフラッシュするように見え、通常の UI 操作を妨げる場合があるため、特別な理由がない限り避けてください。
`ShowDuration (ToolTipService)`	`int (ms, デフォルト: 5000)`	ツールチップが表示され続ける最大時間（ミリ秒）を設定します。短いメッセージには 3000ms、長い説明文には 10000ms 以上が目安です。この時間を超えるとツールチップは自動的に非表示になります。常に表示し続けたい場合は `Int32.MaxValue` を設定できますが、ユーザーが自動消去を期待していることが多く混乱を招く可能性があるため、慎重に使用してください。
`BetweenShowDelay (ToolTipService)`	`int (ms, デフォルト: 100)`	一つのツールチップが消えてから次のコントロールへホバーしたときに、次のツールチップが表示されるまでの遅延を設定します。短い値にすると隣接するコントロール間を移動する際にツールチップが素早く連続表示される「ホットゾーン」効果が生まれ、ツールバーボタンの探索が快適になります。0 に設定するとツールチップを持つコントロール間を移動するたびに遅延なく連続表示され、コンテンツが密な UI では煩わしく感じられる場合があります。多くのツールチップが密集する UI では 50〜100ms 程度の適切な値を維持することを推奨します。
`ShowOnDisabled (ToolTipService)`	`bool`	True にすると `IsEnabled=False` のコントロールでもツールチップを表示できます。保存ボタンが変更なしに無効化されている理由をユーザーに伝えるなど、なぜそのコントロールが使えないかを説明する際に有効です。このプロパティを True にすると、コントロールがグレーアウトしていてもホバーでツールチップが表示されます。ただしコンテナ（StackPanel や Grid など）に設定しても機能せず、無効化されたコントロール自身に直接設定する必要があります。子コントロールにまとめて適用するにはスタイルを使ってください。
`Placement (ToolTip)`	`Left / Top / Right / Bottom / Mouse / etc.`	ツールチップの表示位置を設定します。Bottom はフォームフィールドのヒント表示に適しており、Mouse は一般的な用途でカーソル付近に表示します。Bottom/Top/Left/Right は対象コントロールを基準に相対配置し、Mouse はカーソル位置に追従します。`Absolute` を指定すると画面座標で配置されますが、`PlacementRectangle` を同時に設定しないとツールチップが画面の原点（0,0）付近に表示されるため、Absolute を使う場合は必ず PlacementRectangle も設定してください。

XAML 使用例

<!-- シンプルなテキストツールチップ -->
<Button Content="保存" ToolTip="変更をファイルに保存します (Ctrl+S)" />

<!-- リッチコンテンツのツールチップ -->
<Button Content="ヘルプ">
  <Button.ToolTip>
    <ToolTip>
      <StackPanel>
        <TextBlock Text="ヘルプを表示" FontWeight="Bold" />
        <TextBlock Text="オンラインドキュメントを開きます。"
                   TextWrapping="Wrap" MaxWidth="200" />
      </StackPanel>
    </ToolTip>
  </Button.ToolTip>
</Button>

<!-- 無効ボタンでもツールチップを表示 -->
<Button Content="削除" IsEnabled="{Binding CanDelete}"
        ToolTipService.ShowOnDisabled="True"
        ToolTip="アイテムを選択してから削除できます" />

主な使用例

ボタン・ツールバーアイコンの説明 — アイコンのみのボタンには必ずツールチップでコマンドの説明を提供します。
省略テキストの全表示 — TextTrimming で省略されたテキストを全文表示するツールチップを設定します。
無効状態の理由説明 — ShowOnDisabled=True と組み合わせて、ボタンが無効な理由を説明するツールチップを表示します。
キーボードショートカットの案内 — ツールチップに「(Ctrl+S)」のようなショートカットキー情報を含めて操作性を向上させます。
フォームフィールドのヒント — 入力フィールドにどのような値を入力すればよいかのヒントをツールチップで提供します。

ヒントとベストプラクティス

ツールチップはアイコンボタンに必須 — アイコンのみのボタンはツールチップがなければ機能が全くわかりません。必ず設定します。
テキストには TextWrapping を設定する — リッチツールチップ内の TextBlock には TextWrapping=Wrap と MaxWidth を設定して長いテキストが適切に折り返されるようにします。
ToolTipService.ShowDuration を調整する — デフォルトの 5 秒では長い説明が読み切れない場合があります。コンテンツに応じて長めに設定します。
Popup との使い分け — 自動表示・軽量なインフォメーションには ToolTip を、複雑なインタラクティブな UI には Popup を使います。
アクセシビリティ — ToolTip は AutomationProperties.HelpText でもスクリーンリーダーに情報を提供できます。
ToolTip 内の DataBinding に注意 — ToolTip を文字列で設定した場合、DataContext は親コントロールから自動で継承されません。バインドが必要な場合は <ToolTip> 要素として展開して {Binding RelativeSource=...} を使用するか、ToolTip 要素として設定して DataContext を明示的に指定します。
仮想化リスト内アイテムの ToolTip — 仮想化された ListBox や DataGrid のアイテムに設定した ToolTip は、DataContext がアイテムになるためバインドは正常に機能します。ただしホバー時に画像読み込みやデータクエリなど重い処理を起動しないよう注意します。仮想化でアイテムが再利用されるため、ToolTip コンテンツは常に軽量に保つことが重要です。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

GitHub で ToolTip のソースコードを見る →