Skip to content
August 19, 2008 / Shrikant Patil

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

20 Comments

Leave a Comment
  1. Simon / Nov 2 2008 1:58 pm

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

  2. Daniel / Feb 3 2009 1:01 am

    Very clean solution; thanks for the tip!

  3. paul / Mar 11 2009 1:51 pm

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

  4. Sitija / Aug 12 2009 11:54 am

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

  5. Adam J / Sep 1 2009 3:01 pm

    beautiful solution. thank you.

  6. Harry / Sep 15 2009 9:02 pm

    I am using Flex 3.

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

    • Harry / Sep 15 2009 9:14 pm

      Sorry Guys, Its my mistake.

      ” The above code works perfectly. “

  7. giu / Sep 25 2009 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. Vladimir Pavlovic / Sep 30 2009 8:04 pm

    Very useful!
    Thank you!

  9. Philip Wilder / Nov 12 2009 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.

  10. Alex / Feb 23 2010 6:34 am

    Hi,

    I would like to develop a tooltip which will have “more info” link. Do you have any neat idea for this?

    So I should me able to move mouse over the tooltip and click on “more info” which will give a popup with extended information.


    Alex

  11. Amur / Apr 19 2010 8:50 am

    good job! Thanks

  12. Raj / Apr 26 2010 5:56 am

    If the default font is embedded one, then the htmlText is not working. Can anybody please help on this?

  13. VikramAdith / Jun 25 2010 11:38 am

    Nice, very useful.

  14. venkatnarayan B / Aug 2 2010 9:19 am

    Hi, thanks so much. it was useful.

  15. erinys / Nov 11 2010 9:38 am

    thanks heaps for this!

  16. Bhasker Chari / Dec 29 2010 8:12 am

    The solution look bery clean and simple…But this doesn’t work when you use it with creating a ToolTip in Actionscript and assigning the dynamic text.

    I have done something like this..

    In below in hitData.displayText I will get html text but when I assign it I could see html chars also in my tooltip.

    I have also assigned the toolTip class in creationComplete() as below but no luck..
    ToolTipManager.toolTipClass = HTMLToolTip;

    private var myToolTip:ToolTip;

    private function showToolTip(event:ChartItemEvent):void
    {
    var hitData:HitData = event.hitData;
    var globalPoint:Point = new Point(event.localX,event.localY);
    globalPoint = pieChart.localToGlobal(globalPoint);

    // Create a simple tooltip that appears at the mouse x and y position
    if(!myToolTip)
    {
    myToolTip = ToolTipManager.createToolTip(“”, -100, -100,”errorTipAbove”) as ToolTip;
    }
    var colorCode:String = “#” + hitData.contextColor.toString(16);
    myToolTip.text = hitData.displayText;
    myToolTip.setStyle(“color”,”#000000″);
    myToolTip.setStyle(“borderColor”, colorCode);
    myToolTip.move(globalPoint.x+10,globalPoint.y+10);
    }

    Does any one know solution for this..??

    Thanks in advance!!!

  17. Manoharan / Jul 7 2011 10:51 am

    Very nice solution. Thak you very much. :)

    I did not check this within the Actionscript.

  18. 4NG310 / Apr 11 2012 4:46 pm

    Excelente solucion, muchas gracias.

Trackbacks

  1. Flex HTML ToolTip Component « Web Consultant – Flex/ ColdFusion/ SQL

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: