ToolTip in WPF

Anoop Kumar Sharma
10y
20.3k
0
2
100
Article

A ToolTip control shows some information or a hint about a control in a floating box when the mouse hovers over that control and it disappears when the mouse is moved away from that control. In this article, we will learn how to use a Tooltip and its properties. I will show the following topics in this article:

Let's begin

Basic ToolTip Example

Drag a Button control from the toolbox and drop it. Add a ToolTip property to the button with a message you want to show on mouse hover of the button. We can add a ToolTip in two ways. First the button shows the simplest way to display a ToolTip. The second method is preferred for creating a 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 ToolTip Example

In this example, we create a ToolTip Layout using a StackPanel and other controls in a 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

The ToolTipService class provides various properties to control the display and the behaviour of ToolTips. Using the ToolTipService.ShowDuration property, we can set the amount of time that a ToolTip remains visible when the user places the 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 a control is disabled then the ToolTip does not show on the mouse hover of the control. If you want to display aToolTip on a disabled control (in other words the IsEnabled property is set to False) than we need to set the 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 the user hovers the mouse on a button, there is a delay before the tooltip is displayed. We can set this delay using the ToolTipService.InitialShowDelay property.

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

HorizontalOffset and VerticalOffset Property of ToolTip

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