Moveable Tooltip for Silverlight

Expert Walt Ritscher discusses using Tooltips and Popups for images in Silverlight.

Here is a problem that showed up in my email inbox a few months ago: 

"I've been using ToolTips to show user hints in our application with great success. One requirement has me stumped however. We need to have a ToolTip show when the user is over an image. Further, the ToolTip needs to follow the mouse as it moves over the image and show updated information about the underlying image pixels. I can't figure out how to move the ToolTip. Can you help?"

The answer to this question is to use a Popup instead of the ToolTip. Let's see why the Popup fits the bill.

Silverlight has two floater controls, which are useful for hovering information over the main body of your Silverlight application (ToolTip, Popup).  

The ToolTip

The ToolTip is shown for a brief timespan and then it disappears automatically. You can control the placement with the ToolTipService.Placement property. For example, here is how to set to the mouse position.

Silverlight will determine where the mouse is located and place the ToolTip close to the mouse. Unlike WPF there is no way to specify the horizontal or vertical offset for the ToolTip. A bigger limitation however is that there is no way for the ToolTip to respond to mouse events.

The Popup

The Popup is a customizable container that also floats over you main UI. It can use any Silverlight controls for its UI. Once it is activated the user can interact with the controls within the Popup. The Popup doesn’t show automatically however, you have to write code to achieve that goal.  The Popup can be configured to stay visible indefinitely. If that's the case then you have to write code to dismiss the Popup when you are done. Also the Popup supports positioning relative to the mouse with the HorizontalOffset and VerticalOffset properties

So the key to solving this quest is to determine when the mouse if over the image and show the Popup. Then we’ll track the mouse movements and relocate the Popup as needed. If the user leaves the underlying image or mouse goes idle we'll close the Popup.

The solution code

Now that I know the basis assumptions for the project it's time to write the code. First, I'll define the UI and Popup in my XAML.

Next I'll write some code in the code behind file. To automatically hide the Popup on mouse idle I need to configure a DispatcherTimer.

Now, on the mouse move event for the image I show the Popup. Also in this procedure I reset the idle timer. 

And finally, I ensure that the Popup disappears when the mouse leaves the image.

Here what the floating Popup looks like when the application is running.

 

 

This was first published in October 2010

Dig deeper on Silverlight and Expression application development

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchCloudComputing

SearchSoftwareQuality

SearchSOA

TheServerSide

SearchCloudApplications

Close