自定义ToolTip

flex自带的ToolTip是一个矩形框加上一个文本框，可以通过修改style设置他的大小，背景，字体颜色等，但不能改变其形状，如果我想要一个五角星之类的ToolTip就得自定义了。下面简单介绍一下自定义ToolTiP的方法，其实做法跟自定义其他组件一样，因为ToolTip本身就是一个组件，只是他需要实现IToolTip接口

<?xml version="1.0" encoding="utf-8"?>  
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"  
    implements="mx.core.IToolTip"  
 width="100" height="25" backgroundColor="red" borderStyle="solid" cornerRadius="5">  
 <mx:Script>  
  <!--[CDATA[   
   [Bindable]   
   private var _text:String;   
      
   public function get text():String   
   {   
    return this._text;   
   }   
      
   public function set text(value:String):void   
   {   
    this._text = value;   
   }   
  ]]-->  
 </mx:Script>  
 <mx:Text width="100%" text="{this._text}" color="#FFFFFF" fontSize="15" textAlign="center"/>  
</mx:Canvas>  


 

然后我们在程序中使用这个ToolTip，使用方法是在要显示ToolTip的组件里监听toolTipCreate事件，这个事件是在创建 ToolTip前调用的，因此你可以在这里创建你自定义的ToolTip，如果要对这个ToolTip的位置定位，可以监听他的toolTipShow事件，这个事件是在要显示toolTip时调用的，呵呵，就可以在这里定位了。发现Flex的事件机制无处不在啊！

 

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle">  
 <mx:Script>  
  <!--[CDATA[   
   import mx.events.ToolTipEvent;   
   private function createToolTip(e:ToolTipEvent):void   
   {   
    var tip:MyToolTip = new MyToolTip();   
    e.toolTip = tip;   
   }   
      
   //将ToolTip定位在距离该组件上方（5，5）的位置   
   private function positionToolTip(e:ToolTipEvent):void   
   {   
    var pt:Point = new Point();   
    pt.x = 0;   
    pt.y = 0;   
       
    pt = btn.localToGlobal(pt);   
    e.toolTip.x = pt.x + 5;   
    e.toolTip.y = pt.y - 35;   
   }   
  ]]-->  
 </mx:Script>  
 <mx:Button id="btn" label="testToolTip"  
  toolTip="test"  
  toolTipCreate="createToolTip(event)" toolTipShow="positionToolTip(event)"/>  
</mx:Application>