ToolTip in WPF

ToolTip show some information or Hint about a control in a floating box when mouse is hover on that control and it disappears when mouse is moved away from that control. In this Article, We will learn How to use ToolTip and its properties. We learn following topics in this Article:

Let's begin:

Basic ToolTip Example:
Drop Button from toolbox and add ToolTip property in Button with a Message you want to show on hovering the mouse on the button control. We can add ToolTip in two ways. First button shows the simplest way to display ToolTip. Second method is preferred for creating customized ToolTip.

<Button Content="Click Here" Margin="30" FontSize="16" ToolTip="Click Here"></Button> <Button Content="Click Here" Margin="30" FontSize="16">         <Button.ToolTip>                <ToolTip>                    Click Here                </ToolTip>         </Button.ToolTip> </Button>

Preview:

Customized/Complex TootTip Example:

In this Example, We have created our ToolTip Layout with the help of StackPanel and other controls in ToolTip Element

<Button Content="Print" FontSize="16">                 <Button.ToolTip>                     <ToolTip>                         <StackPanel Width="200">                             <StackPanel Orientation="Horizontal" Background="Tan"       Width="200">                                 <Image Source="printer.png" Margin="10 5"></Image>                                 <Label Content="Print" Margin="10 5" FontSize="20" FontWeight="Bold"></Label>                             </StackPanel>                             <TextBlock Text="Please Select your printer before giving Print Command" FontSize="14" TextWrapping="WrapWithOverflow"></TextBlock>                             <Line Stroke="Gray" StrokeThickness="2" X2="200"></Line>                             <TextBlock Text="Press F1 for Help" FontWeight="ExtraBold"></TextBlock>                         </StackPanel>                     </ToolTip>                 </Button.ToolTip> </Button>

Preview:

ToolTipService.ShowDuration Property:

ToolTipService Class provides various properties to control display and behavior of ToolTips. Using ToolTipService.ShowDuration Property, We can set the amount of time that a ToolTip remains visible when the user places mouse pointer over the control that defines the ToolTip. Its default value is 5000 milliseconds.

<Button Content="ToolTipService.ShowDuration Property"         ToolTip="ClickMe" ToolTipService.ShowDuration="5000"> </Button>

Preview:

ToolTipService.ShowOnDisabled Property:

When Control is disabled then ToolTip does not show on mouse hovering the control. If you want to display Tooltip on disabled control(i.e. IsEnabled property set to False) than We have to set ToolTipService.ShowOnDisabled attached property to True.

<Button Content="Disabled Button" ToolTip="Click Me" IsEnabled="False" FontSize="16"></Button> <Button Content="Disabled Button(ToolTipService.ShowOnDisabled)"         ToolTip="Click Me" IsEnabled="False"         Margin="0 10" FontSize="16"         ToolTipService.ShowOnDisabled="True"> </Button>

Preview:

ToolTipService.InitialShowDelay Property:

When user hover mouse on Button, there is a delay before the ToolTio is displayed. We can set this delay using ToolTipService.InitialShowDelay Property.

<Button Content="ToolTipService.InitialShowDelay='1000'"         ToolTip="Click Me" ToolTipService.InitialShowDelay="1000"> </Button>

HorizontalOffset and VerticalOffset Property of ToolTip:

We can adjust position of ToolTip using HorizontalOffset and VerticalOffset property of ToolTip. HorizontalOffset Property sets the horizontal distance between the Mouse Pointer and the ToolTip popup and VerticalOffset Property sets the vertical distance between the Mouse Pointer and the ToolTip popup.

<Button Content="HorizontalOffset and VerticalOffset" FontSize="16">         <Button.ToolTip>                 <ToolTip HorizontalOffset="20" VerticalOffset="20">                     Click Me                 </ToolTip>         </Button.ToolTip> </Button>

Preview:

HasDropShadow Property of ToolTip:

HasDropShadow Property sets the dropped shadow of Tooltip.

<Button Content="HasDropShadow='True'" FontSize="16">         <Button.ToolTip>                 <ToolTip>                      Click me                 </ToolTip>         </Button.ToolTip> </Button> <Button Content="HasDropShadow='False'" FontSize="16" Margin="0 40">         <Button.ToolTip>                 <ToolTip HasDropShadow="False">                      Click me                 </ToolTip>         </Button.ToolTip> </Button>

Preview:

Hope you like it. Thanks.

[Download Source Code via Google Drive]