Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / WPF

Tooltip service and tooltip facility of WPF

Rate me:
Please Sign up or sign in to vote.
4.88/5 (12 votes)
2 Jun 2009CPOL3 min read 75.1K   9   8
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.

XML
<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.

XML
<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:

tooltip1

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:

XML
<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:

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:

XML
<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:

image

Let's put a little more interesting code here.

XML
<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]
This article was originally posted at http://msdnbangladesh.net/blogs/munnacs/rss.aspx

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Riteq
Australia Australia
About Md. Masudur Rahman

Masudur currently works at Riteq as a software developer. Masudur Lives in Sydney, Australia.

Awards

26 May 2009: Monthly competition: Best ASP.NET article of April 2009

24 Mar 2009: Monthly competition: Best ASP.NET article of February 2009

Masudur Blog

Masudur put down his interesting learning experiences in his blog at http://munnaondotnet.blogspot.com/.

Comments and Discussions

 
QuestionHow to trigger the code from ".cs" file? Pin
Stepan Markakov17-Nov-12 0:16
Stepan Markakov17-Nov-12 0:16 
GeneralNice and simple! Pin
raananv17-Sep-12 9:59
raananv17-Sep-12 9:59 
GeneralRe: Nice and simple! Pin
Rahman Masudur17-Sep-12 18:40
Rahman Masudur17-Sep-12 18:40 
Thanks a lot
Thanks & Best of Luck
Md. Masudur Rahman
http://munnaondotnet.blogspot.com/
http://www.shatkotha.com

QuestionVery perplexing! Tooltip code broken? Pin
Mike74912-Mar-10 10:42
Mike74912-Mar-10 10:42 
AnswerRe: Very perplexing! Tooltip code broken? Pin
Mike74912-Mar-10 10:44
Mike74912-Mar-10 10:44 
GeneralRe: Very perplexing! Tooltip code broken? Pin
Rahman Masudur2-Mar-10 19:06
Rahman Masudur2-Mar-10 19:06 
AnswerRe: Very perplexing! Tooltip code broken? Pin
Clifford Nelson6-Mar-12 11:04
Clifford Nelson6-Mar-12 11:04 
GeneralHow to trigger it from .cs? Pin
Stepan Markakov16-Nov-12 0:41
Stepan Markakov16-Nov-12 0:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.