Editing a ToolTip Style in Blend 3

Posted by Corey on July 10, 2009 at 3:41 pm.

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.

  1. First, add a Tooltip; do this in the Xaml view to look like the below Xaml.image
  2. 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.

    image

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

    image

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

    image

Uncategorized

3 Responses to “Editing a ToolTip Style in Blend 3”

  • 1
    Mason Brown Says:
    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.

  • 2
    Joel Cochran Says:
    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.

  •  
    3
    NewsPeeps (Trackback) Says:
    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…

Leave a Reply