ToolTips are a great way to display mouse over information, while increasing your applications accessibility. UI designers are increasingly demanding the use of rich overlays in applications. Meaning, instead of a standard Tooltip, a designer might want to add polish by adding animation or having a rich UI to a overlay. Initially you may consider wiring up a MouseEnter and MouseLeave event, then handle an overlay through the code; however, I would encourage you to take a look (or second look) at the Tooltip.
Out of the box, styling a Tooltip in Blend is a manual process. The below screenshots/descriptions show how to do this.
- First, add a Tooltip; do this in the Xaml view to look like the below Xaml.
- Next, click, in Xaml, on the <ToolTip tag. This will change the breadcrumb at the top of the Artboard to show [ToolTip]. Click on the breadcrumb and select Edit Template > Edit a Copy.
- After creating the Template, there is a chance your Artboard will look like the below image. You’ll notice that you’re in the context of editing the ToolTip template without visuals. If you experience this, go to step 4 to see how you can edit the visuals.
- To edit the ToolTip, click the Resources tab, locate the ToolTip style, right click and select Edit. The Artboard will show the visuals for the ToolTip. You can now edit the ToolTip like any other control.
July 10th, 2009 at 7:15 pm
Thanks Corey. This helped me out today. However, the design view of the different tooltip states is a little funky. What you see on the stage looks very different from what get’s published. Not very designer friendly.PS. I need a tutorial post on skinning a combo box. It should be a simple task, but it also requires a convoluted manual approach in order to get Blend to produce what I want. Simple UI elements like tooltips and comboboxes should be intuitive and fairly easy for noobs (like me) to figure out.
July 13th, 2009 at 10:03 am
Hi Mason,For complex controls (in WPF), if you want to start with a copy of their Templates, try using the “Simple Styles” versions. In Blend 3, go to the Asset Manager, drop down “Styles”, and select “Simple Styles”. This will give you a list of controls that have all their counterparts’ functionality but simplified parts to re-template.
July 16th, 2009 at 5:50 pm
Editing a ToolTip Style in Blend 3 | Corey Schuman…
Thank you for submitting this cool story - Trackback from NewsPeeps…
March 29th, 2010 at 10:25 am
Following these instructions just gets me a ‘InvalidOperationException: ‘ToolTip’ cannot have a logical or visual parent.”I get this on a new WPF project created in Blend adding the tooltip to a Button in the Window. This is on Blend 3.
April 4th, 2010 at 1:02 am
Same situation : ‘InvalidOperationException: ‘ToolTip’ cannot have a logical or visual
parent.”
May 2nd, 2010 at 8:37 pm
Important Note: This does NOT work in WPF. Silverlight only!
Hopefully, Blend 4 will support Tooltip styles for WPF and make it a little more designer friendly.
Great post though!
May 29th, 2010 at 11:13 am
Hello,this is Gayle Lorenz,just found your web-site on google and i must say this blog is great.may I share some of the article found in this post to my local mates?i am not sure and what you think?anyway,Many thanks!