Using images in tooltips

Using images in tooltips

A few decades ago, a UI designer came up with a clever idea regarding how to show contextual help in the user interface. That idea, the tooltip, is now considered an essential part of a UX designer's tool bag. You see them in any modern interface; here is an example from Visual Studio 2010.

When I hover the mouse over the toolbar button a little floating window pops up with explanatory text to clarify the purpose of the button. That's a tool tip, though I suspect you already knew that. In this example, you can see that the tool tip also explains that I can use the Ctrl+O key combination to open a file.

WPF provides some interesting additions to the basic tool tip control, and that's what I want to discuss today. WPF contains a tool tip control. If you use it in the default mode it looks exactly like the screenshot above. By that I mean it shows a simple floating window with a light background and dark text. In WPF and Silverlight however we can re-template most controls.

Let's start by looking at a basic tool tip in XAML.

Since I'm using the tool tip property of the button I'll get a simple TextBlock based tool tip.

Getting fancy
Now let's add some alternate UI. I'll use the property element syntax to do this.

In this tooltip I choose my SteelBlue background and White foreground brushes. I also add a dropshadow to the ToolTip control. In the body of the tooltip I add a few textblocks and an image control.

    Requires Free Membership to View

    Login

    When you register, you'll begin receiving targeted emails from my team of award-winning writers. Our goal is to provide a unique online resource for developers, architects and development managers tasked with building and maintaining enterprise applications using Visual Basic, C# and the Microsoft .NET platform.

    Hannah Smalltree, Editorial Director

    By submitting your registration information to SearchWinDevelopment.com you agree to receive email communications from TechTarget and TechTarget partners. We encourage you to read our Privacy Policy which contains important disclosures about how we collect and use your registration and other information. If you reside outside of the United States, by submitting this registration information you consent to having your personal data transferred to and processed in the United States. Your use of SearchWinDevelopment.com is governed by our Terms of Use. You may contact us at webmaster@TechTarget.com.

Here is the result of my new UI.

Adding some transparency
For the last example I'll add another interesting effect. I'm going to set the background of the tooltip to transparent and also adjust the opacity level of image. As a result, the tool tip will look like it has no borders and you'll be able to see the underlying UI through the tool tip.

Really the sky is the limit when it thinking about tooltip appearance in WPF. Here are a few items to keep in mind though. Tooltips will not stay on screen indefinitely. They automatically disappear after a few seconds. Also, the user cannot interact with any controls on the tooltip.

This was first published in September 2010

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.

Back to top