19
Aug
08

Flex HTML ToolTip Component

Flex components accepts plain text to display as ToolTip. So there is no way to format the ToolTip text. So i looked into this problem, i checked the source code of the class “ToolTip”. There i got a very easy solution for this.

The ToolTip class object uses IUITextField object to display the ToolTip text. In component lifeCycle, at the process of commitProperties() method, text property of the IUITextField is get assigned by the String which is specified to for component’s tooltip property. I got the right place, The Trick is just instead of assigning the tooltip string to the text property, override it by the property htmlText property of the IUITextField object, which will enable the html text to appear in tooltip.

So i created a  component HTMLToolTip, which overrides the protected function commitProperties() method of the TootTip object. here is the source code of the component;

package com
{
    import mx.containers.*;
    import mx.controls.Text;
    import mx.controls.ToolTip;
    import mx.core.*;

    public class HTMLToolTip extends ToolTip
    {
        public function HTMLToolTip()
        {    super(); }

        override protected function commitProperties():void{
            super.commitProperties();
            textField.htmlText = text;
        }
    }
}

To use this component, after loading the application (creationComplete()) use ToolTipManager.toolTipClass to assign this component as toolTip custom class, and asign the components toolTip property to assign html text. here is sample code;

<![CDATA[
    import com.*;
    private function init():void{
        ToolTipManager.toolTipClass = HTMLToolTip;
        mtBtn.toolTip = "this is <strong>HTML</strong>Tool<strong>Tip."
    }
]]>

The trick is overriding the components commitProperties() method.


10 Responses to “Flex HTML ToolTip Component”


  1. November 2, 2008 at 1:58 pm

    thanks, this is a very neat solution which makes tooltips much more useful.

  2. February 3, 2009 at 1:01 am

    Very clean solution; thanks for the tip!

  3. March 11, 2009 at 1:51 pm

    This totally just solved a problem I was having – thanks so much!

  4. 4 Sitija
    August 12, 2009 at 11:54 am

    This was really very useful, thanks a lot!!!!

  5. September 1, 2009 at 3:01 pm

    beautiful solution. thank you.

  6. 6 Harry
    September 15, 2009 at 9:02 pm

    I am using Flex 3.

    ToolTipManager.toolTipClass = HTMLToolTip; — this line does not compile for me.
    1120: Access of undefined property HTMLToolTip.

  7. 8 giu
    September 25, 2009 at 2:48 pm

    hey harry potter
    why don’t you say how did you solve it?

    So, I bring you a soluiton:
    rename HTMLToolTip to ToolTipHTML
    and it works
    btw,
    thx

  8. 9 Vladimir Pavlovic
    September 30, 2009 at 8:04 pm

    Very useful!
    Thank you!

  9. 10 Philip Wilder
    November 12, 2009 at 4:12 pm

    Very nice solution, the only potential problem I can see if that the change looks global. You can’t change the tooltip class for just one screen of your application. Additionally Flex libraries can’t use this solution without potentially unexpected ramifications in their calling applications.


Leave a Reply