WPF FAQ - ToolTip

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

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>

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> 

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

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>