Playing with Tooltip in WPF

ToolTip displays information in popup for an element or control. It is used to display some useful information to user. ToolTip class is derived from ContentControl class hence Tooltip can contain single object. WPF provides fully customizable Tooltip. In this post I will describe some majorly used functionality of ToolTip.

Simple Tooltip

<Grid>

    <Button Height="35" Width="120"

            Content="Buy"

            ToolTip="Click here to Buy" />

</Grid>

Or

<Grid>

    <Button Height="35" Width="120"

            Content="Buy">

        <Button.ToolTip>

            <StackPanel>

                <TextBlock FontSize="15"

                            Text="Purchase" />

                <TextBlock Margin="5,5,0,0"

                            Text="Click here to Buy" />

            </StackPanel>

        </Button.ToolTip>

    </Button>

</Grid>

ToolTip Placement

Tooltip provides different types of placement. We can set placement property to Left, Right, Top, Bottom, Relative, Absolute etc. This placement property is available in ToolTip class as well in ToolTipService.

Placement = “Top”

<Grid>

    <Button Height="35" Width="120"

            ToolTipService.Placement="Top"

        Content="Buy">

        <Button.ToolTip>

            <StackPanel>

                <TextBlock FontSize="15"

                        Text="Purchase" />

                <TextBlock Margin="5,5,0,0"

                        Text="Click here to Buy" />

            </StackPanel>

        </Button.ToolTip>

    </Button>

</Grid>

Placement = “Relative”

HorizontalOffset=”25”

VerticalOffset =”20”

<Grid>

    <Button Height="35" Width="120"

            ToolTipService.Placement="Relative"

            ToolTipService.HorizontalOffset="25"

            ToolTipService.VerticalOffset="20"

            Content="Buy">

        <Button.ToolTip>

            <StackPanel>

                <TextBlock FontSize="15"

                        Text="Purchase" />

                <TextBlock Margin="5,5,0,0"

                        Text="Click here to Buy" />

            </StackPanel>

        </Button.ToolTip>

    </Button>

</Grid>

Setting duration of ToolTip

Showduration property allows you to specify duration for ToolTip.

<Grid>

    <Button Height="35" Width="120"

        ToolTip="Click here to Buy"

        ToolTipService.ShowDuration="500"

        Content="Buy" />

</Grid>

Showing ToolTip of Disabled Controls

ToolTip can also be displayed on disabled control using ShowOnDisable property of ToolTipService.

<Grid>

    <Button Height="35" Width="120"

            ToolTip="Click here to Buy"

            IsEnabled="False"

            ToolTipService.ShowOnDisabled="True"

            Content="Buy" />

</Grid>

See Also – 

WPF Content Model

ViewBox in WPF

Binding WPF DataGrid with XML file using XMLDataProvider