ヒントTooltips

ヒントは、他のコントロールまたはオブジェクトにリンクされた短い説明です。A tooltip is a short description that is linked to another control or object. ヒントを使うと、UI では直接説明されていない、なじみのないオブジェクトをユーザーが理解しやすくなります。Tooltips help users understand unfamiliar objects that aren't described directly in the UI. ヒントは、ユーザーがコントロールにフォーカスを移動する、コントロール上で長押しする、またはマウス ポインターをコントロール上にホバーすると、自動的に表示されます。They display automatically when the user moves focus to, presses and holds, or hovers the mouse pointer over a control. また、ヒントは数秒経過するか、ユーザーが指、ポインター、またはキーボード/ゲームパッドのフォーカスを移動すると消えます。The tooltip disappears after a few seconds, or when the user moves the finger, pointer or keyboard/gamepad focus.

ヒント

重要な API:ToolTip クラスToolTipService クラスImportant APIs: ToolTip class, ToolTipService class

適切なコントロールの選択Is this the right control?

ユーザーに操作の実行を指示する前に、ヒントを使ってコントロールに関する詳しい情報を表示します。Use a tooltip to reveal more info about a control before asking the user to perform an action. ヒントは慎重に使い、タスクを完了しようとしているユーザーにとって明らかに重要である場合にのみ追加します。Tooltips should be used sparingly, and only when they are adding distinct value for the user who is trying to complete a task. 1 つの目安は、情報が同じエクスペリエンスのどこかで入手できる場合、ヒントは必要ありません。One rule of thumb is that if the information is available elsewhere in the same experience, you do not need a tooltip. 価値あるヒントによって、不明瞭な操作を明確にします。A valuable tooltip will clarify an unclear action.

ヒントはどのような場合に使えばよいでしょうか。When should you use a tooltip? それを判断するには、以下の質問を考えます。To decide, consider these questions:

  • 情報はポインターのホバーに基づいて表示すべきですか?Should info become visible based on pointer hover? そうでない場合は、別のコントロールを使います。If not, use another control. ヒントは、ユーザーの操作の結果としてのみ表示します。自動的には表示しません。Display tips only as the result of user interaction, never display them on their own.

  • コントロールにはテキスト ラベルがありますか?Does a control have a text label? ない場合は、ヒントを使ってラベルを表示します。If not, use a tooltip to provide the label. UX の設計では、ほとんどのコントロールにインラインでラベルを付けることをお勧めします。それらのコントロールには、ヒントは必要ありません。It is a good UX design practice to label most controls inline and for these you don't need tooltips. アイコンだけが表示されるツール バー コントロールとコマンド ボタンには、ヒントが必要です。Toolbar controls and command buttons showing only icons need tooltips.

  • 説明や追加情報がオブジェクトに対して役立ちますか?Does an object benefit from a description or further info? そうであれば、ヒントを使います。If so, use a tooltip. ただし、このテキストは、主要なタスクに必須なものではなく、補助的なものである必要があります。But the text must be supplemental — that is, not essential to the primary tasks. 必須なものであれば、直接 UI に配置して、ユーザーが探さなくても済むようにします。If it is essential, put it directly in the UI so that users don't have to discover or hunt for it.

  • 表示する補助的な情報は、エラー、警告、または状態ですか?Is the supplemental info an error, warning, or status? その場合は、ポップアップなど、他の UI 要素を使います。If so, use another UI element, such as a flyout.

  • ユーザーがヒントを操作する必要がありますか?Do users need to interact with the tip? その場合は、別のコントロールを使います。If so, use another control. ヒントはマウスを動かすと消えるため、ユーザーはヒントを操作できません。Users can't interact with tips because moving the mouse makes them disappear.

  • ユーザーが補助的な情報を印刷する必要がありますか?Do users need to print the supplemental info? その場合は、別のコントロールを使います。If so, use another control.

  • ユーザーがヒントを煩わしいと感じますか?Will users find the tips annoying or distracting? その場合は、別の手段を使うことを検討します。何もしない、という選択肢もあります。If so, consider using another solution — including doing nothing at all. 煩わしいと感じる可能性があってもヒントを使う場合は、ユーザーがヒントをオフにできるようにします。If you do use tips where they might be distracting, allow users to turn them off.

Example

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、ToolTip の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the ToolTip in action.

Bing 地図アプリのヒントです。A tooltip in the Bing Maps app.

Bing Maps アプリのヒントです

ToolTip の作成Create a tooltip

ToolTip は、その所有者である別の UI 要素に割り当てる必要があります。A ToolTip must be assigned to another UI element that is its owner. ToolTipService クラスは静的メソッドを提供し、ToolTip を表示します。The ToolTipService class provides static methods to display a ToolTip.

XAML では、ToolTipService.Tooltip 添付プロパティを使用して ToolTip を所有者に割り当てます。In XAML, use the ToolTipService.Tooltip attached property to assign the ToolTip to an owner.

<Button Content="Submit" ToolTipService.ToolTip="Click to submit"/>

コードで、ToolTipService.SetToolTip メソッドを使用して ToolTip を所有者に割り当てます。In code, use the ToolTipService.SetToolTip method to assign the ToolTip to an owner.

<Button x:Name="submitButton" Content="Submit"/>
ToolTip toolTip = new ToolTip();
toolTip.Content = "Click to submit";
ToolTipService.SetToolTip(submitButton, toolTip);

コンテンツContent

任意のオブジェクトを ToolTip のコンテンツとして使用できます。You can use any object as the Content of a ToolTip. ToolTip でイメージを使用する例を次に示します。Here's an example of using an Image in a ToolTip.

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

配置Placement

既定では、ToolTip はポインターの上部に中央揃えで表示されます。By default, a ToolTip is displayed centered above the pointer. 配置はアプリ ウィンドウによって制約されていないため、ToolTip が部分的に表示されたり、完全にアプリ ウィンドウの境界の外部に表示されたりすることがあります。The placement is not constrained by the app window, so the ToolTip might be displayed partially or completely outside of the app window bounds.

広範囲の調整には、Placement プロパティまたは ToolTipService.Placement 添付プロパティを使用して、ToolTip をポインターの上、下、左、右のいずれに表示するかを指定します。For broad adjustments, use the Placement property or ToolTipService.Placement attached property to specify whether the ToolTip should draw above, below, left, or right of the pointer. VerticalOffset プロパティまたは HorizontalOffset プロパティを設定して、ポインターと ToolTip 間の距離を変更することができます。You can set the VerticalOffset or HorizontalOffset properties to change the distance between the pointer and the ToolTip. 2 つのオフセット値の 1 つだけが、最終的な位置に影響します。Placement が Top または Bottom の場合は VerticalOffset、Placement が Left または Right の場合は HorizontalOffset です。Only one of the two offset values will influence the final position - VerticalOffset when Placement is Top or Bottom, HorizontalOffset when Placement is Left or Right.

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

参照しているコンテンツが ToolTip によって隠れている場合は、新しい PlacementRect プロパティを使用して配置を正確に調整できます。If a ToolTip obscures the content it is referring to, you can adjust its placement precisely using the new PlacementRect property. PlacementRect は Tooltip の位置を固定し、この領域の外部に ToolTip を表示する十分な画面領域がある場合は、ToolTip によって隠されない領域としても機能します。PlacementRect anchors the ToolTip's position and also serves as an area that ToolTip will not occlude, provided there’s sufficient screen space to draw ToolTip outside this area. ToolTip のオーナーに対して相対的な四角形の原点を指定し、除外領域の高さと幅を指定できます。You can specify the origin of the rectangle relative to the ToolTip’s owner, and the height and width of the exclusion area. Placement プロパティによって、ToolTip を PlacementRect の上、下、左、右のいずれに表示するかが定義されます。The Placement property will define if ToolTip should draw above, below, left, or right of the 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>

推奨事項Recommendations

  • ヒントは慎重に使います (または使わない)。Use tooltips sparingly (or not at all). ヒントは作業の中断になります。Tooltips are an interruption. ヒントはポップアップと同じように煩わしい場合があるため、大きな付加価値がない限り使わないでください。A tooltip can be as distracting as a pop-up, so don't use them unless they add significant value.
  • ヒントのテキストは簡潔なものにします。Keep the tooltip text concise. ヒントは短い文やフレーズに適しています。Tooltips are perfect for short sentences and sentence fragments. 大きなテキストのまとまりは圧迫感を与えることがあり、ユーザーが読み終える前にヒントがタイムアウトする可能性があります。Large blocks of text can be overwhelming and the tooltip may time out before the user has finished reading.
  • 役に立つ補足的なヒント テキストを作成します。Create helpful, supplemental tooltip text. ヒントのテキストは、情報として役に立つ必要があります。Tooltip text must be informative. 表示しなくても明らかな情報や、既に画面上に表示されている内容の繰り返しなどは避けます。Don't make it obvious or just repeat what is already on the screen. ヒントのテキストは常に表示されているわけではないため、ユーザーが必ずしも読まなくても問題がないような、補足的な情報である必要があります。Because tooltip text isn't always visible, it should be supplemental info that users don't have to read. 重要な情報は、名前から判別できるコントロール ラベルを使うか、補足的なテキストを適切な場所に配置することで伝えるようにします。Communicate important info using self-explanatory control labels or in-place supplemental text.
  • 状況に応じて画像を使います。Use images when appropriate. ヒント内に画像を使うとよい場合もあります。Sometimes it's better to use an image in a tooltip. たとえば、ユーザーがハイパーリンクの上にカーソルを置いたときに、ヒントを使ってリンク先ページのプレビューを表示できます。For example, when the user hovers over a hyperlink, you can use a tooltip to show a preview of the linked page.
  • 既に UI に表示されているテキストは、ヒントとして表示しないでください。Don't use a tooltip to display text already visible in the UI. たとえば、ボタンと同じテキストを表示するヒントをボタンに表示しないでください。For example, don't put a tooltip on a button that shows the same text of the button.
  • ヒント内に対話的なコントロールを配置しないでください。Don't put interactive controls inside the tooltip.
  • 対話的に見えるような画像をヒント内に配置しないでください。Don't put images that look like they are interactive inside the tooltip.

サンプル コードを入手するGet the sample code