FLEX4 Custom ToolTip Component Replacement system default ToolTip example

In Flex, if you set the ToolTip property value to a component, Tip prompts appear automatically when you move the mouse over the component, the default style is a yellow background, and only normal text is displayed.

We can inherit the tooltip of the system to implement our own ToolTip component replacement and implement the following functions:
1, the hint text can use HTML text (you can also display pictures)
2, hint background use custom skin (gradient, border, semi-transparent background)

The effect chart is as follows:

---Custom prompt component htmltooltip.as---

package {    import mx.controls.ToolTip;           public class HtmlToolTip extends  ToolTip     {        override protected  Function commitproperties (): void{            

Super.commitproperties ();             //into HTML text     

        textField.htmlText = text;         }            

       override protected function createchildren (): void{             //Set Border Style              this.setstyle ("Borderskin", Htmltoolborder);             this.setstyle ("BackgroundColors", [

0X006699, 0XAEB4E6]);

            this.setstyle ("BorderColor", 0x5965CC);

            super.createchildren ();         }    &nbsp}}

---Prompt for component skin htmltoolborder.as---

Package {    import flash.display.GradientType;      import

 mx.skins.halo.ToolTipBorder;           //tooltipborder is the default border style     public  class htmltoolborder extends tooltipborder{         override protected function updatedisplaylist (Unscaledwidth:number,                                                          unscaledheight: Number): void{                           var borderthickness:number  = this.getstyle ("borderthickness");             var borderColor:Number 

    = this.getstyle ("bordercolor");             var backgroundcolors:array =

 this.getstyle ("Backgroundcolors");             var backgroundalpha:number =

 this.getstyle ("Backgroundalpha");                    

       super.updatedisplaylist (Unscaledwidth, unscaledheight);                    

       var w:Number = this.width;             var h:number = this.height;             //Clear Original background graphics     

        this.graphics.clear ();             //drawing background with gradients              this.graphics.begingradientfill (GradientType.LINEAR,

BACKGROUNDCOLORS,[1.0,0.5],[0,255]);             //Draw Rectangle      

       this.graphics.drawrect (0,0,W,H);

            this.graphics.endfill ();             this.alpha = backgroundalpha ;                               //Draw Border             

This.graphics.lineStyle (borderthickness,bordercolor,1);

            this.graphics.moveto (0,0);

            this.graphics.lineto (w,0);

            this.graphics.lineto (W,H);

            this.graphics.lineto (0,H);

            this.graphics.lineto (0,0);         }    &nbsp}}

---use---

<?xml version= "1.0"  encoding= "Utf-8"?> <s:application xmlns:fx= "http://ns.adobe.com/" mxml/2009 "               xmlns:s=" Library://ns.adobe.com/flex/spark "            
   creationcomplete= "Init (event)" >       <fx:Script>         <! [Cdata[            import mx.events.flexevent
;             import mx.managers.tooltipmanager
;                            protected function init (event:FlexEvent): void              {&NBSP;&NBsp;              
tooltipmanager.tooltipclass = htmltooltip;                    btn.tooltip = "<b>htmltext</b><br/><br/><br/><br/><br/><br/><br/>go to: <u>http://
Hangge.com</u> ";             }                        ]]>      </fx:Script>     <s:layout>          <s:verticallayout paddingleft= " paddingtop="/&GT     </s:layout>       <s:button id= "BTN"   Label= "Custom ToolTip components"/> </s:Application>