Click here to Skip to main content
13,086,662 members (55,921 online)
Click here to Skip to main content
Add your own
alternative version

Stats

7.2K views
5 bookmarked
Posted 12 Nov 2013

Quick and Dirty (But Nice!) ToolTips – Revisited and Interactive

, 21 Nov 2013
Rate this:
Please Sign up or sign in to vote.
Here are some quick and dirty tooltips - revisited and interactive

A few years ago, I posted an article that leveraged markup extensions to quickly show localized ToolTips with minimal effort. Fast forward to 2013: I still like ToolTips, but interactive / clickable ones would be nice, and there’s Blend Behaviors that provide developers with a great design-time experience. As a result, I wrote a simple control and a complementary Blend Behavior that gets me quite a bit of flexibility with minimal impementation effort.

The behavior allows you to very easily create simple ToolTips like this:

A simple ToolTip

However, it doesn’t stop there. The following Blend Behavior generates an error ToolTip:

Behavior properties in Expression Blend

ErrorToolTip

Also, unlike the built-in ToolTip service, the behavior supports interactive/clickable ToolTips. As the ToolTip takes arbitary XAML or a user control for Content or Header properties, you can display arbitrary controls on the popup.

InteractiveToolTip

Features at a glance:

  • Blend Behavior with design-time support – you can setup rich ToolTips within Blend in a matter of seconds
  • Unlike regular ToolTips, those are clickable – you can put interactive content such as buttons or Hyperlinks on them
  • Built-in header / content support
  • Data Binding and MVVM-friendly
  • Content and header not limited to text
  • Built-in themes: You can show a ToolTip as an information, warning, or error
  • If bound to strings, values can be formatted on the fly using the HeaderStringFormat and ContentStringFormat properties
  • Disabling ToolTips through a bindable IsEnabled flag

Some final notes: I didn’t make everything configurable – that would have been overkill for the scope of a ToolTip. Instead, I recommend you to tweak the control styles to your needs. Things you might want to change:

  • When being displayed, ToolTips are slightly transparent – full opacity is only set if you hover over them. You can easily adjust this in the animation that fades in the control.
  • If you shorten the delay in which the ToolTip is being displayed remarkably, you should also adjust animations (fade-in / fade-out in order to not cut them off).
  • Placement of the ToolTip’s popup (near Mouse pointer) is currently hardcoded in the Behavior class.

Happy coding! :)

License

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

Share

About the Author

Philipp Sumi
Architect I'm a gun for hire
Switzerland Switzerland
Philipp is an independent software engineer with great love for all things .NET.
He lives in Winterthur, Switzerland and his home on the web is at http://www.hardcodet.net.

You may also be interested in...

Pro

Comments and Discussions

 
QuestionGreat and Clever Tooltip Pin
ly_he16-Jun-17 13:25
memberly_he16-Jun-17 13:25 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170813.1 | Last Updated 21 Nov 2013
Article Copyright 2013 by Philipp Sumi
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid