Tooltip service and tooltip facility of WPF

Introduction

Tooltip is very important part of any modern software. It helps and suggests what to do with the 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 putdown 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 have two default event to help the developers do some level of customization, the events are  ToolTipOpening and ToolTipClosing.

Customizing the tooltip

In almost all the technology exists except WPF, tooltip is not that much of customizable. But in WPF all most 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 much bizarre. But no kidding, we can put almost any thing in a tooltip content. Enough talk let put a 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 changed on the look and feel of the border. And the effect after running the application is look like the following image.

Using the tooltip service

So we now know that tooltip is very good level of customizable in WPF. Now lets 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 little using ToolTipService and set the ToolTipService.Placement property to our desired location, bellow code is given to show a tooltip always at 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 is look like the following image.

Lets see another very interesting feature about the tooltipservice. If we have a disable element the tooltip does not get showed when we move over on the element. But using ToolTipService.ShowOnDisabled property we can display tooltip even on a disabled item. Bellow 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 is look like this

Lets put few 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 above code we have set the ToolTipService.InitialShowDelay to 100 ms. Which allow the tooltip to show almost just after we mouse over the button. New 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.

Summery

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]