ToolTip の概要

[アーティクル]
05/04/2023

ツールヒントは、ユーザーが Button などの要素の上にマウスポインターを置いたときに表示される小さなポップアップウィンドウです。このトピックでは、ツールヒントを紹介し、ツールヒントの内容を作成およびカスタマイズする方法について説明します。

ツールヒントを持つ要素の上にマウスポインターを置くと、一定の時間、ツールヒントの内容 (たとえば、コントロールの機能を説明するテキストコンテンツ) を含むウィンドウが表示されます。コントロールからマウスポインターを移動すると、ツールヒントの内容がフォーカスを受け取ることができなくなるため、ウィンドウが消えます

ツールヒントの内容は、1 行または複数行のテキスト、イメージ、図形などのビジュアルコンテンツを含めることができます。次のプロパティの 1 つをツールヒントの内容に設定することによって、コントロールのツールヒントを定義します。

どのプロパティを使用するかは、ツールヒントを定義するコントロールが FrameworkContentElement または FrameworkElement のどちらのクラスを継承しているかによって異なります。

次の例では、Button コントロールの ToolTip プロパティにテキスト文字列を設定することにより、簡単なツールヒントを作成する方法を示します。

<Button ToolTip="Click to submit your information" 
        Click="SubmitCode" Height="20" Width="50">Submit</Button>

また、ツールヒントを ToolTip オブジェクトとして定義することもできます。次の例では、XAML を使用して TextBox 要素のツールヒントとして ToolTip オブジェクトを指定しています。この例では、FrameworkElement.ToolTip プロパティを設定することにより ToolTip を指定していることに注意してください。

<TextBox HorizontalAlignment="Left">ToolTip with non-text content
  <TextBox.ToolTip>
    <ToolTip>
      <DockPanel Width="50" Height="70">
        <Image Source="data\flower.jpg"/>
        <TextBlock>Useful information goes here.</TextBlock>
      </DockPanel>
    </ToolTip>
  </TextBox.ToolTip>
</TextBox>

次の例では、コードを使用して ToolTip オブジェクトを生成します。この例では、ToolTip (tt) を作成し、それを Button に関連付けます。

button = new Button();
button.Content = "Hover over me.";
tt = new ToolTip();
tt.Content = "Created with C#";
button.ToolTip = tt;
cv2.Children.Add(button);

button = New Button()
button.Content = "Hover over me."
tt = New ToolTip()
tt.Content = "Created with Visual Basic"
button.ToolTip = tt
cv2.Children.Add(button)

DockPanel などのレイアウト要素でツールヒントの内容を囲むことにより、ToolTip オブジェクトとして定義されていないツールヒントの内容を作成することもできます。次の例では、DockPanel コントロールで囲まれたコンテンツを、TextBox の ToolTip プロパティに設定する方法を示します。

<TextBox>
  ToolTip with image and text
  <TextBox.ToolTip>
       <StackPanel>
        <Image Source="data\flower.jpg"/>
        <TextBlock>Useful information goes here.</TextBlock>
      </StackPanel>
  </TextBox.ToolTip>

ビジュアルプロパティを設定し、スタイルを適用して、ツールヒントの内容をカスタマイズできます。ツールヒントの内容を ToolTip オブジェクトとして定義した場合は、ToolTip オブジェクトのビジュアルプロパティを設定できます。それ以外の場合は、ToolTipService クラスで同等の添付プロパティを設定する必要があります。

ツールヒントの内容の位置を指定するために、ToolTip および ToolTipService プロパティを設定する方法の例については、「ToolTip を配置する」を参照してください。

カスタム Style を定義することで、ToolTip のスタイルを設定できます。次の例では、Background、Foreground、FontSize、FontWeight を設定することによって、ToolTip の配置をオフセットし、その外観を変更する方法を示す、Simple という名前の Style を定義します。

<Style TargetType="ToolTip">
  <Setter Property = "HorizontalOffset" Value="10"/>
  <Setter Property = "VerticalOffset" Value="10"/>
  <Setter Property = "Background" Value="LightBlue"/>
  <Setter Property = "Foreground" Value="Purple"/>
  <Setter Property = "FontSize" Value="14"/>
  <Setter Property = "FontWeight" Value="Bold"/>
</Style>

ToolTipService の時間間隔プロパティの使用

ToolTipService クラスでは、ツールヒントの表示時間を設定するために、InitialShowDelay、BetweenShowDelay、ShowDuration プロパティが提供されています。

InitialShowDelay プロパティと ShowDuration プロパティを使用して、ToolTip が表示される前の遅延 (通常は短い時間) を指定します。また、ToolTip を表示し続ける時間も指定できます。詳細については、ツールヒントの表示を遅らせる方法に関するページを参照してください。

BetweenShowDelay プロパティでは、コントロール間でマウスポインターをすばやく移動するときに、コントロールのツールヒントを初期遅延なしで表示するかどうかを決定します。 BetweenShowDelay プロパティの詳細については、「BetweenShowDelay プロパティを使用する」を参照してください。

次の例では、ツールヒントのこれらのプロパティを設定する方法を示します。

<Ellipse Height="25" Width="50" 
         Fill="Gray" 
         HorizontalAlignment="Left"
         ToolTipService.InitialShowDelay="1000"
         ToolTipService.ShowDuration="7000"
         ToolTipService.BetweenShowDelay="2000">
  <Ellipse.ToolTip>
    <ToolTip Placement="Right" 
             PlacementRectangle="50,0,0,0"
             HorizontalOffset="10" 
             VerticalOffset="20"
             HasDropShadow="false"
             Opened="whenToolTipOpens"
             Closed="whenToolTipCloses"
             >
      <BulletDecorator>
        <BulletDecorator.Bullet>
          <Ellipse Height="10" Width="20" Fill="Blue"/>
        </BulletDecorator.Bullet>
        <TextBlock>Uses the ToolTip Class</TextBlock>
      </BulletDecorator>
    </ToolTip>
  </Ellipse.ToolTip>
</Ellipse>

ツールヒントとは

ツールヒントの作成

ToolTip クラスおよび ToolTipService クラスのプロパティの使用

ツールヒントのスタイル設定

ToolTipService の時間間隔プロパティの使用

関連項目

フィードバック

その他のリソース