ToolTip の概要ToolTip Overview

ツールヒントは、ユーザーが経由の要素の上にマウス ポインターを置いたときに表示される小さいポップアップ ウィンドウ、Buttonします。A tooltip is a small pop-up window that appears when a user pauses the mouse pointer over an element, such as over a Button. このトピックでは、ツールヒントを紹介し、ツールヒントの内容を作成およびカスタマイズする方法について説明します。This topic introduces the tooltip and discusses how to create and customize tooltip content.

ツールヒントとはWhat Is a Tooltip?

ツールヒントを持つ要素の上にマウス ポインターを置くと、一定の時間、ツールヒントの内容 (たとえば、コントロールの機能を説明するテキスト コンテンツ) を含むウィンドウが表示されます。When a user moves the mouse pointer over an element that has a tooltip, a window that contains tooltip content (for example, text content that describes the function of a control) appears for a specified amount of time. コントロールからマウス ポインターを移動すると、ツールヒントの内容がフォーカスを受け取ることができなくなるため、ウィンドウが消えますIf the user moves the mouse pointer away from the control, the window disappears because the tooltip content cannot receive focus.

ツールヒントの内容は、1 行または複数行のテキスト、イメージ、図形などのビジュアル コンテンツを含めることができます。The content of a tooltip can contain one or more lines of text, images, shapes, or other visual content. 次のプロパティの 1 つをツールヒントの内容に設定することによって、コントロールのツールヒントを定義します。You define a tooltip for a control by setting one of the following properties to the tooltip content.

使用するプロパティは、ツールヒントを定義するコントロールを継承するかどうかによって異なります、FrameworkContentElementまたはFrameworkElementクラス。Which property you use depends on whether the control that defines the tooltip inherits from the FrameworkContentElement or FrameworkElement class.

ツールヒントの作成Creating a ToolTip

次の例では、設定して、単純なツールヒントを作成する方法を示しています、ToolTipプロパティをButtonをテキスト文字列に制御します。The following example shows how to create a simple tooltip by setting the ToolTip property for a Button control to a text string.

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

としてのツールヒントを定義することも、ToolTipオブジェクト。You can also define a tooltip as a ToolTip object. 次の例ではXAMLXAMLを指定する、ToolTipオブジェクトのツールヒントとして、TextBox要素。The following example uses XAMLXAML to specify a ToolTip object as the tooltip of a TextBox element. 例では、指定、ToolTipを設定して、FrameworkElement.ToolTipプロパティ。Note that the example specifies the ToolTip by setting the FrameworkElement.ToolTip property.

<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オブジェクト。The following example uses code to generate a ToolTip object. 例は、作成、 ToolTip (tt) に関連付けますと、Buttonします。The example creates a ToolTip (tt) and associates it with a 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)

として定義されていないツールヒントの内容を作成することも、ToolTipオブジェクトなどのレイアウト要素でツールヒントの内容を囲むことで、DockPanelします。You can also create tooltip content that is not defined as a ToolTip object by enclosing the tooltip content in a layout element, such as a DockPanel. 次の例は、設定する方法を示します、ToolTipのプロパティをTextBoxで囲まれたコンテンツをDockPanelコントロール。The following example shows how to set the ToolTip property of a TextBox to content that is enclosed in a DockPanel control.

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

ToolTip クラスおよび ToolTipService クラスのプロパティの使用Using the Properties of the ToolTip and ToolTipService Classes

ビジュアル プロパティを設定し、スタイルを適用して、ツールヒントの内容をカスタマイズできます。You can customize tooltip content by setting visual properties and applying styles. コンテンツのツールヒントを定義する場合、ToolTipオブジェクトのビジュアル プロパティを設定することができます、ToolTipオブジェクト。If you define the tooltip content as a ToolTip object, you can set the visual properties of the ToolTip object. それ以外の場合、同等の添付プロパティを設定する必要があります、ToolTipServiceクラス。Otherwise, you must set equivalent attached properties on the ToolTipService class.

使用して、ツールヒントの内容の位置を指定するためにプロパティを設定する方法の例については、ToolTipToolTipServiceプロパティを参照してくださいToolTip を配置するします。For an example of how to set properties in order to specify the position of tooltip content by using the ToolTip and ToolTipService properties, see Position a ToolTip.

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

スタイルを設定することができます、ToolTipカスタムを定義することでStyleします。You can style a ToolTip by defining a custom Style. 次の例では、定義、Styleと呼ばれるSimpleの位置をオフセットする方法を示す、ToolTipを設定してその外観を変更し、 BackgroundForegroundFontSize、およびFontWeightします。The following example defines a Style called Simple that shows how to offset the placement of the ToolTip and change its appearance by setting the Background, Foreground, FontSize, and FontWeight.

<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 の時間間隔プロパティの使用Using the Time Interval Properties of ToolTipService

ToolTipService時間が表示されます、次のプロパティにツールヒントを設定するクラスが用意されています: InitialShowDelayBetweenShowDelay、およびShowDurationします。The ToolTipService class provides the following properties for you to set tooltip display times: InitialShowDelay, BetweenShowDelay, and ShowDuration.

使用、InitialShowDelayShowDurationプロパティ遅延を指定する通常の簡単な前に、ToolTipが表示されますとどのくらいの期間を指定することも、ToolTip引き続き表示されます。Use the InitialShowDelay and ShowDuration properties to specify a delay, typically brief, before a ToolTip appears and also to specify how long a ToolTip remains visible. 詳細については、「方法 :ツールヒントの表示が遅延します。For more information, see How to: Delay the Display of a ToolTip.

BetweenShowDelayプロパティは、それらのマウス ポインターをすばやく移動するときを初期遅延なしのさまざまなコントロールのツールヒントが表示されるかどうかを決定します。The BetweenShowDelay property determines if tooltips for different controls appear without an initial delay when you move the mouse pointer quickly between them. 詳細については、BetweenShowDelayプロパティを参照してくださいUse the BetweenShowDelay Propertyします。For more information about the BetweenShowDelay property, see Use the BetweenShowDelay Property.

次の例では、ツールヒントのこれらのプロパティを設定する方法を示します。The following example shows how to set these properties for a tooltip.

<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>

関連項目See also