WPF FAQ - ToolTip

How come I don’t see a MouseHover event in WPF for it’s elements?

WPF doesn’t provide a MouseHover event and instead provides a much more flexible and high-level Tooltip support. To simulate MouseHover, you will first set the tooltip for the element in question to some dummy text and then listen to the TooltipOpening event where you would mark it as ‘Handled’ as follows:

 [XAML]
<Canvas ToolTipOpening='Canvas_ToolTipOpening' ToolTipService.ToolTip='Testing'>
</Canvas>

 [C#]
        private void Canvas_ToolTipOpening(object sender, ToolTipEventArgs e)
        {
            e.Handled = true;
            // More code goes here:
        }
Permalink
Can I delay the display of a ToolTip ?

You can set a ‘ToolTipService’ property that causes a brief delay before a ToolTip displays. You set the properties of the ‘ToolTipService’ class by attaching them directly to the element that exposes the tooltip.

[XAML]
 
<TextBox HorizontalAlignment='Left' ToolTipService.InitialShowDelay='1500'
ToolTip='Useful information goes here.'>
     ToolTip with delay
   </TextBox>
Permalink
How do I customize the style of a tooltip that gets shown ONLY on the CheckBoxes in my Window?

Nest the tooltip’s style within the checkbox’s style as follows:

    <Window.Resources>  
        <Style TargetType='CheckBox'>   
            <Style.Resources>  
                <Style TargetType='ToolTip'>   
                    <Setter Property='Background' Value='Red'/>   
                </Style>  
            </Style.Resources>  
            <Setter Property='FontSize' Value='14'/>   
        </Style>  
    </Window.Resources>  
    <Grid>  
        <CheckBox ToolTip='Sample ToolTip!'>Sample CheckBox</CheckBox>  
    </Grid>
Permalink
How do I include a delay only for the first tooltip and not for subsequent tooltips in my app?

The trick is to use the InitialShowDelay and BetweenShowDelay property appropriately as shown below in all your tooltips:

[XAML]

<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
Permalink
How do I use the TooltipService class?

The following example shows how to use the ‘ToolTipService’ properties to specify the position of a tooltip among other things. This also shows how the tooltip look and feel can be customized with any content.

[XAML]

    <Ellipse Height='25' Width='50' 
         Fill='Gray' 
         HorizontalAlignment='Left'
         ToolTipService.InitialShowDelay='1000'
         ToolTipService.ShowDuration='7000'
         ToolTipService.BetweenShowDelay='2000'
         ToolTipService.Placement='Right' 
         ToolTipService.PlacementRectangle='50,0,0,0'
         ToolTipService.HorizontalOffset='10' 
         ToolTipService.VerticalOffset='20'
         ToolTipService.HasDropShadow='false'
         ToolTipService.ShowOnDisabled='true' 
         ToolTipService.IsEnabled='true'
         ToolTipOpening='whenToolTipOpens'
         ToolTipClosing='whenToolTipCloses'
         >
  <Ellipse.ToolTip>
    <BulletDecorator>
      <BulletDecorator.Bullet>
        <Ellipse Height='10' Width='20' Fill='Blue'/>
      </BulletDecorator.Bullet>
      <TextBlock>Uses the ToolTipService class</TextBlock>
    </BulletDecorator>
  </Ellipse.ToolTip>
</Ellipse>
Permalink