After writing my last post about the advanced tooltip functionality in .NET 2.0 using the VisualTips component, I realized that WPF (Windows Presentation Foundation) lacked a way OOTB to create two distinctive tooltips on an element that could be displayed based on whether or not the control was disabled or enabled. VisualTips provides this functionality. This helps users to better understand what step they need to take before a control will become enabled and why the heck they can’t click on it. For instance, in MuvAudio, the “Record” button is disabled until an item has been added to the playlist. When they move their mouse over the button, as of right now, they get no message whatsoever. They don’t even get the regular tooltip telling them what it would do if it were enabled. (I’m in the process of implementing the VisualTips so the next version of MuvAudio will have the functionality I’m about to explain). It would make sense to do the following:

• Make the Record button, in the disabled state, display a message that says: “To being recording you must first add at least one audio file to the playlist. You can do this by double-clicking anywhere in the playlist area or by clicking on “Playlist”, “Add File(s)” and selecting the audio files that you would like to record.”
• Make the Record button in the enabled state display: “Starts the recording process.”

To do this in WPF I had look at the problem from a different perspective. Now, I’m not the greatest programmer in the world and I am definitely am open to suggestion, so please leave me comments, but this is what I came up with:

To add a ToolTip that displays different text based on the enabled/disabled of a button (this can be replaced with any element) that it is the child of:

The important parts are as follows:

Visibility=”{Binding Path=IsEnabled, Converter={StaticResource ToolTipElementVisibilityConverter}, ConverterParameter=VisibleOnDisabled}”

Visibility=”{Binding Path=IsEnabled, Converter={StaticResource ToolTipElementVisibilityConverter}, ConverterParameter=VisibleOnEnabled}”

• In the declaration of the Element that will contain the tooltip, you need to make sure you have ToolTipService.ShowOnDisabled=”True”
  because this allows the tooltip to still be displayed when the element is disabled.
• You need to set the DataContext of the tooltip as follows: DataContext=”{Binding Path=PlacementTarget, RelativeSource={RelativeSource Self}}”; this allows us to set the binding of the IsEnabled property in the elements of the tooltip.
• Finally, you need to set the Visibility using a binding with a Converter and a ConverterParameter based on when you want the items to be displayed. In the above example we only want one of the textblocks to be displayed in either state so we have the parameter set to the opposite of each other:
  • The Path is bound to the IsEnabled property of the element that is the parent of this tooltip (as described above).
  • The Converter is a converter that we created that returns back the Visibility we want (Visible or Collapsed) based on the IsEnabled property and the ConvertParameter.
  • The ConverterParameter is a string that we use to tell the item to be visible when the item is enabled or when the item is disabled. The two choices are VisibleOnDisabled and VisibleOnEnabled.

The actual converter is contained in the sample project.

As a side, I looked into using enums for the parameter instead of strings but they just added extra code that doesn’t get taken advantage of (Visual Studio 2008 Beta 2 doesn’t display auto completion for enums in xaml). An example would look like this: “ConverterParameter={x:Static local:ToolTipElementVisibility.VisibleOnDisabled}”, where “local” is a xml namespace you would add to the window declaration.

The other pieces of the puzzle are as follows:

1. Add an xml namespace declaration for the converter class to reference the converter (I prefer to add this to the window.xaml the tooltip will be used on): xmlns:cvrt=”clr-namespace:MuvEnum.ToolTipElementVisibility.Converters”
2. Add the converter as a resource in the same window.xaml you used in #1: <Window.Resources>        <cvrt:ToolTipElementVisibilityConverter x:Key=”ToolTipElementVisibilityConverter” />    </Window.Resources>

A full sample is attached and has a compiled executable.

You’re free to use this code in any project you like. A reference to this post would be appreciated but is not required.

After I finished this code, which I’ll definitely be using in a soon to be finished WPF product, I realized that this goes above and beyond what the VisualTips for .NET can do by allowing a user to create distinctively different tooltips based on the enabled and/or disabled state of the element they are a child of thanks to the ability of tooltips to host any WPF element.

I assume this idea can be used to bind to other Boolean properties of elements and not just the IsEnabled. One of the most exciting things about WPF is the ability to create things that even those that created WPF didn’t even foresee. Now that deserves a post of its own.

WPF ToolTip Element Visibility Sample Project

Here’s the default .NET ToolTip:

Now take a look at the following ToolTips:

Not only do they look much better, but they also provide some very needed features.

1. Each ToolTip can be defined with an access key, F2 in the above samples, which provides you with the ability to give extra functionality for each ToolTip.
2. Each ToolTip can be given a specific “disabled” message that you can define to let your users know why a button is disabled and what the next step would be to get it enabled. In the regular ToolTips, if a control is disabled then no ToolTip is shown.

The best part about the above ToolTips is that you can add this functionality to your program for free thanks to SKYBOUND. Their free .NET component is called VisualTips and it’s a breeze to implement. They also have a bunch of other free components to help you spruce up your application so definitely check them out.

On a side note, WPF (.NET 3.0) provides similar functionality out of the box and here is a xaml sample (not the coolest, but can be beefed up easily):

<Button x:Name=”btn1″ HorizontalAlignment=”Left” VerticalAlignment=”Top” Content=”Button” IsEnabled=”False” ToolTipService.ShowOnDisabled=”True” >

<Button.ToolTip>

<ToolTip x:Name=”buttonToolTip”>

<StackPanel>

<Image Source=”http://www.muvaudio.com/banner/muv2banner170x77.png” />

<TextBlock x:Name=”buttonToolTipText” Text=”This is a sample tooltip in WPF”/>

</StackPanel>

</ToolTip>

</Button.ToolTip>

</Button>

The ToolTipService.ShowOnDisabled=”True”
attribute makes it so the ToolTip is displayed whether or not the control it is attached to is enabled or disabled. In the below screenshot, the control is disabled and you can see the sample WPF ToolTip.

ToolTips are an important part of the usability of any application, especially when it helps remove the need of requiring the user to read the manual before beginning use of your application.