Ever wanted to display fancy tooltips without spending too much time developing custom
Replace the default
ToolTip class by the customized
HTMLToolTip class and use HTML tags to style and format your tooltips.
Most of the Flex components offer a
toolTip property that can be used to define a text to be displayed when the user hovers the mouse cursor over the component.
String you assign to the
toolTip property of a component is then rendered using the basic
ToolTip class provided by the Flex framework. Unfortunately, this default rendering doesn’t support styling or formatting options.
Defining custom tooltips is possible by using the
ToolTipManager class and by defining custom
ToolTip classes. Custom tooltip classes can be based on any Flex component as long as they implement the
IToolTip interface. This allows supporting very complex tooltips but also requires some efforts to build these custom components.
If you don’t want to spend time on developing custom
ToolTip classes but would really like having some text formatting options, there is an easy option: the
HTMLToolTip is a generic custom
ToolTip class that supports rendering text containing HTML tags. With just a single call, you can safely replace the default
ToolTip class by this one such that any
toolTip property can now be defined with a
String containing HTML tags.
I won’t list here all the supported HTML tags, take a look at the Adobe LiveDocs section on htmlText for further details.
And, instead of explaining the trick used in the
HTMLToolTip class, I prefer showing a small demo application illustrating some of the possibilities offered by these enhanced tooltips.
You can look at the source code (or by right clicking on the application) to get the
HTMLToolTip class, to see how to define it as the new tooltip rendering class and to check some examples of HTML formatted tooltips.