Tooltip service and tooltip facility of WPF

Introduction

Tooltip is a very important part of any modern software. It helps and suggests what to do with any user interaction item control or what a particular content or legends means. In this article, I am going to discuss about a small yet interesting feature of WPF, the “ToolTipService”. Using tooltip service, we can do a good amount of customization on how we can display tooltip.

Let us put down a small example how we can define a tooltip of any content in XAML markup.

<Button Width="100" Height="30" Content="Click Me!"
                ToolTip="Click here to do some thing"></Button>

WPF has two default events to help developers do some level of customization, the events are ToolTipOpening and ToolTipClosing.

Customizing the Tooltip

In almost all the technology that exists except WPF, tooltip is not that customizable. But in WPF, almost all the gates are opened. We can customize tooltip in such a way that we can put any content in a tooltip, event a data grid! Just kidding, no scenario can be that bizarre. But no kidding, we can put almost anything in a tooltip content. Enough talk, let's put an example and see actually how pretty handy it is.

<Button Width="100" Height="30" Content="Click Me!">
    <Button.ToolTip>
        <Border Margin="-4,0,-4,-3" Padding="10" Background="Silver">
            <Border.BitmapEffect>
                <OuterGlowBitmapEffect></OuterGlowBitmapEffect>
            </Border.BitmapEffect>
            <Label>This is a simple customization of tooltip</Label>
        </Border>
    </Button.ToolTip>
</Button>

In the above example, we have added a border as a content of the tooltip and also applied few changes on the look and feel of the border. And the effect after running the application looks like the following image:

Using the Tooltip Service

So we now know that tooltip is a very good level of customizable in WPF. Now let's explore a service that is evolved around tooltip - the “ToolTipService”. Normally a tooltip is displayed exactly where the mouse pointer is. If we want to display the tooltip always at a particular position, we can just modify the markup a little using ToolTipService and set the ToolTipService.Placement property to our desired location. The code below is given to show a tooltip always at the bottom of a button element:

<Button Width="100" Height="30" Content="Click Me!" 
        ToolTipService.Placement="Bottom">
    <Button.ToolTip>
        <Border Margin="-4,0,-4,-3" Padding="10" Background="Silver">
            <Border.BitmapEffect>
                <OuterGlowBitmapEffect></OuterGlowBitmapEffect>
            </Border.BitmapEffect>
            <Label>This is a simple customization of tooltip</Label>
        </Border>
    </Button.ToolTip>
</Button>

And the result looks like the following image:

Let's see another very interesting feature about the tooltipservice. If we have a disable element, the tooltip does not get shown when we move over on the element. But using ToolTipService.ShowOnDisabled property, we can display tooltip even on a disabled item. Below, the code is given:

<Button Width="100" Height="30" Content="Click Me!" 
    IsEnabled="False"
    ToolTipService.ShowOnDisabled="True"
    ToolTipService.Placement="Bottom">
    <Button.ToolTip>
        <Border Margin="-4,0,-4,-3" Padding="10" Background="Silver">
            <Border.BitmapEffect>
                <OuterGlowBitmapEffect></OuterGlowBitmapEffect>
            </Border.BitmapEffect>
            <Label>This is a simple customization of tooltip</Label>
        </Border>
    </Button.ToolTip>
</Button>

And the effect of the above code looks like this:

Let's put a little more interesting code here.

<Button Width="100" Height="30" Content="Click Me!" 
        ToolTipService.HasDropShadow="False"
        ToolTipService.InitialShowDelay="100"
        ToolTipService.ShowDuration="5000"
        ToolTipService.ShowOnDisabled="True"
        ToolTipService.Placement="Bottom">
    <Button.ToolTip>
        <Border Margin="-4,0,-4,-3" Padding="10" Background="Silver">
            <Border.BitmapEffect>
                <OuterGlowBitmapEffect></OuterGlowBitmapEffect>
            </Border.BitmapEffect>
            <Label>This is a simple customization of tooltip</Label>
        </Border>
    </Button.ToolTip>
</Button>

In the above code, we have set the ToolTipService.InitialShowDelay to 100 ms which allows the tooltip to show almost just after we mouse over the button. Now we have made the tooltip stay open a little longer using ToolTipService.ShowDuration to 5000 ms. We can customize more using the other properties of ToolTipService.

Summary

In this sort of article, we have seen a few interesting tricks about tooltip using ToolTipService. For more information about how to customize the tooltip, please visit the references. Best of luck and happy programming.

References

1. http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice.aspx [About ToolTipService Class]
   
2. http://msdn.microsoft.com/en-us/library/ms752368.aspx [How to Position a ToolTip]
   
3. http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice_fields.aspx [Fields of ToolTip service]