ツールヒント

[アーティクル]
07/04/2024

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

Note

Windows 11 バージョン 21H2 以降では、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 以降には、丸みのある角を使用するこのコントロールの新しいテンプレートが含まれます。詳しくは、「角の半径」をご覧ください。

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

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

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

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

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

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

コードでは、 ToolTipService.SetToolTip メソッドを使用して、ツールヒントを所有者に割り当てます。

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

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

コンテンツ

ツールヒントの Content として任意のオブジェクトを使用できます。ツールヒントで Image を使用する例を次に示します。

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

配置

既定では、ツールヒントはポインターの上の中央に表示されます。配置はアプリウィンドウによって制限されないため、ツールヒントがアプリウィンドウの境界の一部または完全に外側に表示される可能性があります。

広範囲の調整には、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 クラス

次の方法で共有

ツールヒント

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

推奨事項

UWP と WinUI 2