Easy Flex ToolTip customization using HTML tags

Ever wanted to display fancy tooltips without spending too much time developing custom ToolTip classes?

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.

The 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.

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.

VN:F [1.9.8_1114]
Rating: 5.0/5 (16 votes cast)
Easy Flex ToolTip customization using HTML tags, 5.0 out of 5 based on 16 ratings
Categories: Flex, How To Tags: Flex, howto, tooltip Email This Post
  1. September 24th, 2010 at 19:09 | #1

    This worked perfect! I found this class out by accident when I was trying to use the editinplace class that hasn’t worked as well :( Still wrestling with it because it works in a simple example.

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  2. September 24th, 2010 at 19:42 | #2

    Sometimes accidents are good ;-)

    Let me know if you want some help with any of my edit in place experiments!
    (not sure which one you’re trying to use, is it the FadingTextInput, the FadingInjector or the EditInPlaceEffect?).

    VN:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  3. September 24th, 2010 at 22:07 | #3

    It’s the EditInPlaceEffect. If I create a simple mxml project and set the effect to a TextInput it works like a charm. If I do the same thing in the current project I’m working on the text won’t show until I focus in on the field. When the field loses focus the whole thing fades away and you can’t see anything. I have a feeling it’s due to some styles we’re using. I’ll keep playing with it because it’s a very slick component.

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  4. September 24th, 2010 at 23:58 | #4

    The effect sets alpha property to 0 when out of focus, 0.3 when mouse is over the component and 1 when in focus.
    For some components, setting alpha to 0.0 hides everything, not only the “border/background/…” but also the “real” content.

    I’d suggest that you check the alpha property of the sub component displaying your “text” and ensure the property isn’t inherited from its container if you want it to remain visible.

    VN:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  5. jenny
    December 16th, 2010 at 04:37 | #5

    i use ur example on my Flash Builder 4, however, it does not work, is it because i do not have that AC_OETag.js to control the tooltip? for i really do not know how to use that.

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  6. baron Dodd
    February 4th, 2011 at 18:12 | #6

    By coincidence I yesterday coded exactly the same source code as your HTMLToolTip class attempting to solve the problem, line for line! Unfortunately it does not always work. I am using it to render tooltips in AdvancedDataGrids, and about 50% of the time something sets the text property on the tooltips text field or changes a style which results in the htmlText being wiped out. Nightmare to track down what is going on.

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  7. May 26th, 2011 at 17:30 | #7

    @baron Dodd
    I used it and it was a nigthmare
    For example, if i display an image and the text associate with it is not enough long,the image is not displayed nor loaded !!!!
    The html of Adobe is really strange :s

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  8. cheap down jacket
    November 25th, 2011 at 04:54 | #8

    .I would name your blog the dreamland! While Santa knocks at our door just once per year, you blog is open the whole year – wow!

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  9. March 2nd, 2012 at 12:18 | #9

    I tried to use this class and add the tooltip dynamically, but it seems it will not show the text as HTML.
    private var tip:HTMLToolTip;

    s=”My Tip A“;
    tip = ToolTipManager.createToolTip(s,
    event.currentTarget.x + event.currentTarget.width + 10,
    event.currentTarget.y
    ) as HTMLToolTip;

    VA:F [1.9.8_1114]
    Rating: 5.0/5 (1 vote cast)
  10. Anoop Singh
    January 2nd, 2013 at 08:10 | #10

    This is not working in Flex 4, please tell some way how to use this in Flex 4.

    VA:F [1.9.8_1114]
    Rating: 5.0/5 (1 vote cast)
  11. June 26th, 2013 at 23:58 | #11

    Perfect!!

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  12. Ally
    December 3rd, 2013 at 07:32 | #12

    Thanks. I have used it in Flex 4 for a customized label and it works fine.

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  1. August 5th, 2010 at 01:45 | #1
  2. September 24th, 2010 at 20:49 | #2
Put ActionScript or MXML code snippets between tags: [as3][/as3]
You can also resize the comment area by dragging the bottom right corner.