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.

About these ads