ツール ヒント

ヒントは、別のコントロールまたはオブジェクトに関する追加情報を含むポップアップです。 ユーザーがフォーカスを移動したり、長押ししたり、関連付けられたコントロールの上にポインターを合わせたりすると、ツールヒントが自動的に表示されます。 ツールヒントは、ユーザーがフォーカスの移動元、押しの停止、または関連付けられているコントロールの上へのポインターのポインターの移動を停止すると消えます (ポインターがツールヒントに向かって移動している場合を除く)。

注意

バージョン 21H2 Windows 11以降は、Ctrl キーを押してヒントを閉じることもできます。

これは適切なコントロールですか?

ユーザーに操作の実行を指示する前に、ヒントを使ってコントロールに関する詳しい情報を表示します。 ヒントは慎重に使い、タスクを完了しようとしているユーザーにとって明らかに重要である場合にのみ追加します。 1 つの目安は、情報が同じエクスペリエンスのどこかで入手できる場合、ヒントは必要ありません。 価値あるヒントによって、不明瞭な操作を明確にします。

ヒントはどのような場合に使えばよいでしょうか。 それを判断するには、以下の質問を考えます。

• 情報はポインターのホバーに基づいて表示すべきですか? そうでない場合は、別のコントロールを使います。 ヒントは、ユーザーの操作の結果としてのみ表示します。自動的には表示しません。

• コントロールにはテキスト ラベルがありますか? ない場合は、ヒントを使ってラベルを表示します。 UX の設計では、ほとんどのコントロールにインラインでラベルを付けることをお勧めします。それらのコントロールには、ヒントは必要ありません。 アイコンだけが表示されるツール バー コントロールとコマンド ボタンには、ヒントが必要です。

• 説明や追加情報がオブジェクトに対して役立ちますか? そうであれば、ヒントを使います。 ただし、このテキストは、主要なタスクに必須なものではなく、補助的なものである必要があります。 必須なものであれば、直接 UI に配置して、ユーザーが探さなくても済むようにします。

• 表示する補助的な情報は、エラー、警告、または状態ですか? その場合は、ポップアップなど、他の UI 要素を使います。

• ユーザーがヒントを操作する必要がありますか? その場合は、別のコントロールを使います。 ヒントはマウスを動かすと消えるため、ユーザーはヒントを操作できません。

• ユーザーが補助的な情報を印刷する必要がありますか? その場合は、別のコントロールを使います。

• ユーザーがヒントを煩わしいと感じますか? その場合は、別の手段を使うことを検討します。何もしない、という選択肢もあります。 煩わしいと感じる可能性があってもヒントを使う場合は、ユーザーがヒントをオフにできるようにします。

推奨事項

• ヒントは慎重に使います (または使わない)。 ヒントは作業の中断になります。 ヒントはポップアップと同じように煩わしい場合があるため、大きな付加価値がない限り使わないでください。
• ヒントのテキストは簡潔なものにします。 ヒントは短い文やフレーズに適しています。 大きなテキストのまとまりは圧迫感を与えることがあり、ユーザーが読み終える前にヒントがタイムアウトする可能性があります。
• 役に立つ補足的なヒント テキストを作成します。 ヒントのテキストは、情報として役に立つ必要があります。 表示しなくても明らかな情報や、既に画面上に表示されている内容の繰り返しなどは避けます。 ヒントのテキストは常に表示されているわけではないため、ユーザーが必ずしも読まなくても問題がないような、補足的な情報である必要があります。 重要な情報は、名前から判別できるコントロール ラベルを使うか、補足的なテキストを適切な場所に配置することで伝えるようにします。
• 状況に応じて画像を使います。 ヒント内に画像を使うとよい場合もあります。 たとえば、ユーザーがハイパーリンクの上にカーソルを置いたときに、ヒントを使ってリンク先ページのプレビューを表示できます。
• キーボード アクセラレータ は、既定でツールヒントに表示されます。 独自のツールヒントを追加する場合は、使用可能なキーボード アクセラレータに関する情報が含まれていることを確認します。
• 既に UI に表示されているテキストは、ヒントとして表示しないでください。 たとえば、ボタンと同じテキストを表示するヒントをボタンに表示しないでください。
• ヒント内に対話的なコントロールを配置しないでください。
• 対話的に見えるような画像をヒント内に配置しないでください。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。 プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

このコントロールの API は 、Windows.UI.Xaml.Controls 名前空間に 存在します。

• UWP API:ToolTip クラス、 ToolTipService クラス
• WinUI 2 ギャラリー アプリを開き、ツールヒントの動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。 WinUI 2.2 以降には、丸い角を使用するこのコントロール用の新しいテンプレートが含まれています。 詳しくは、「角の半径」をご覧ください。

ToolTip の作成

• 重要な API:ToolTip クラス、 ToolTipService クラス

WinUI 3 ギャラリー アプリを開き、ツールヒントの動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

ToolTip は、その所有者である別の UI 要素に割り当てる必要があります。 ToolTipService クラスは静的メソッドを提供し、ToolTip を表示します。

XAML では、ToolTipService.Tooltip 添付プロパティを使用して ToolTip を所有者に割り当てます。

<Button Content="New" ToolTipService.ToolTip="Create a new document"/>

コードで、ToolTipService.SetToolTip メソッドを使用して ToolTip を所有者に割り当てます。

<Button x:Name="submitButton" Content="New"/>

ToolTip toolTip = new ToolTip();
toolTip.Content = "Create a new document";
ToolTipService.SetToolTip(submitButton, toolTip);

コンテンツ

任意のオブジェクトを ToolTip のコンテンツとして使用できます。 ToolTip でイメージを使用する例を次に示します。

<TextBlock Text="store logo">
    <ToolTipService.ToolTip>
        <Image Source="Assets/StoreLogo.png"/>
    </ToolTipService.ToolTip>
</TextBlock>

配置

既定では、ToolTip はポインターの上部に中央揃えで表示されます。 配置はアプリ ウィンドウによって制約されていないため、ToolTip が部分的に表示されたり、完全にアプリ ウィンドウの境界の外部に表示されたりすることがあります。

広範囲の調整には、Placement プロパティまたは ToolTipService.Placement 添付プロパティを使用して、ToolTip をポインターの上、下、左、右のいずれに表示するかを指定します。 VerticalOffset プロパティまたは HorizontalOffset プロパティを設定して、ポインターと ToolTip 間の距離を変更することができます。 2 つのオフセット値の 1 つだけが、最終的な位置に影響します。Placement が Top または Bottom の場合は VerticalOffset、Placement が Left または Right の場合は HorizontalOffset です。

<!-- An Image with an offset ToolTip. -->
<Image Source="Assets/StoreLogo.png">
    <ToolTipService.ToolTip>
        <ToolTip Content="Offset ToolTip."
                 Placement="Right"
                 HorizontalOffset="20"/>
    </ToolTipService.ToolTip>
</Image>

ツールヒントで参照しているコンテンツが隠れている場合は、 PlacementRect プロパティを使用して配置を正確に調整できます。 PlacementRect は ToolTip の位置を固定し、この領域の外部に ToolTip を表示する十分な画面領域がある場合は、ToolTip によって隠されない領域としても機能します。 ToolTip の元の画面に対して相対的な四角形の原点を指定し、除外領域の高さと幅を指定できます。 Placement プロパティによって、ToolTip を PlacementRect の上、下、左、右のいずれに表示するかが定義されます。

<!-- An Image with a non-occluding ToolTip. -->
<Image Source="Assets/StoreLogo.png" Height="64" Width="96">
    <ToolTipService.ToolTip>
        <ToolTip Content="Non-occluding ToolTip."
                 PlacementRect="0,0,96,64"/>
    </ToolTipService.ToolTip>
</Image>

サンプル コードを入手する

• WinUI ギャラリーのサンプル - すべての XAML コントロールを対話型形式で表示します。

関連記事

• ToolTip クラス