Tooltips in child elements

Tooltips in child elements

A tooltip is a simple concept. You put a tooltip on a WPF control and whenever the mouse hovers over the control WPF launches the tooltip.

But things can get tricky when nesting control within a complex UI. Occasionally the expected tooltip might not appear. This article explores some of these idiosyncrasies in WPF.

Parent child tooltips
The basic rules of tooltips are simple. If a child element has a tooltip, that takes precedence over any tooltip applied at a parent level. Take this XAML for example.

Button1 and Button2 have their own tooltips. Button3 doesn't have one, so it gets the tooltip from the StackPanel. The last button has the most complicated layout in the example. The 1st image and the TextBlock (within the Button content) have their own tooltip. The last image doesn't have a local tooltip so it will use a parent one instead. WPF will walk the tree looking for a tooltip, eventually finding one at the StackPanel level.

TabItem header
Here is a problem I encountered on a project a few months ago. We wanted to have a preview tooltip for each TabItem in a TabControl. The tooltip needed to show up when the user hovered over the tab at the top of the TabControl but not when the user moused over any of the children of the TabItem. Here is an early attempt at a solution, but it doesn't work.

This doesn't work for our scenario, because the

    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.

Image gets the parent tooltip.

Add dedicated TabItem header elements
The solution to the problem is to add some elements and tooltip to the TabItem header as in this example.

Take a look at this last screen shot. I've got the Apples tab open. I'm holding the mouse over the Oranges tab (but haven't clicked on the tab). The preview tooltip appears. If I click on the Oranges tab however, the preview tab won't appear when I hover of the child controls of the tab.


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