How to Use the Dojo Tooltip Widget

Introduction

Tooltips are window control objects used to add extra information in the form of descriptive text displayed in a pop-up window. Just hovering over the element pops up this extra information (see the next picture). Tooltips are extensively used in both Windows forms and web pages. Microsoft controls, from early on, used the tooltip property that would bring up a little beige window with some text.

Tooltip text is also displayed on web pages. The DOJO Foundation's tooltip rendering is awesome. The tooltips rendered by HTML pale in comparison. This article, like the previous one, is really basic and is written to give a flavor of what this widget does and how it is done. The readers should visit the Dojo Foundation web site to learn more about the exciting possibilities.

Microsoft tooltip control

The Microsoft variety of tooltip can be seen in all of its products, from the Start button of Windows to the tooltips that pop up over most of its controls. Here is a basic one from Windows XP.

In Visual Basic you would set the tooltip property if you need to use the tooltip to provide some additional information. In the .NET 3.0 environment the tooltip can escape the drab "text only" rendering and use the ContentProperty, as in the following XAML code for the tooltip property of a textbox. But XAML has yet to find widespread use. The tooltip in this case will be mainly described by the non-inheritable ToolTip and ToolTipService classes. The next snippet is taken from Microsoft documentation.

<TextBox HorizontalAlignment="Left">ToolTip with non-text content
<TextBox.ToolTip>
<ToolTip>
<DockPanel Width="50" Height="70">
<Image Source="data\flower.jpg"/>
<TextBlock>Useful information goes here.</TextBlock>
</DockPanel>
</ToolTip>
</TextBox.ToolTip>
</TextBox>