Learn about ToolTip in WPF

Introduction

A WPF 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 WPF, the ToolTip property is attached with a ToolTip control. You can either use a ToolTip XAML element at design time or a ToolTip C# object at runtime to create and attach a ToolTip to a 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 WPF 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 the 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 WPF 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 behavior 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) then 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 Properties 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.

<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

The HasDropShadow property sets the dropped shadow of the 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

I hope you like this. Thanks.