【转】 自定义ToolTip

1. Main.mxml(主程度界面)

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"       width="700" height="600" fontSize="12" backgroundColor="#FFFFFF">     

<mx:Array id="directionData">         

<mx:Object label="上边" value="1" />         

<mx:Object label="下边" value="2" />         

<mx:Object label="左边" value="3" />         

<mx:Object label="右边" value="4" />         

<mx:Object label="左上角" value="5" />         

<mx:Object label="右上角" value="6" />         

<mx:Object label="左下角" value="7" />         

<mx:Object label="右下角" value="8" />     

</mx:Array>     

<mx:ArrayCollection id="listData">         

<mx:Object label="image-1" desc="image deｓｃｒｉｐｔion-001 image deｓｃｒｉｐｔion-001"               image="@Embed('cheng/images/001.jpg')"               direction="{box_direction.selectedItem.value}" />         

<mx:Object label="image-2" desc="image deｓｃｒｉｐｔion-002 image deｓｃｒｉｐｔion-002"               image="@Embed('cheng/images/002.jpg')"               direction="{box_direction.selectedItem.value}" />         

<mx:Object label="image-3" desc="image deｓｃｒｉｐｔion-003 image deｓｃｒｉｐｔion-003"               image="@Embed('cheng/images/003.jpg')"               direction="{box_direction.selectedItem.value}" />         

<mx:Object label="image-4" desc="image deｓｃｒｉｐｔion-004 image deｓｃｒｉｐｔion-004"               image="@Embed('cheng/images/004.jpg')"               direction="{box_direction.selectedItem.value}" />     

</mx:ArrayCollection>     <mx:ControlBar>         <mx:Label text="ToolTip显示方向" />         

<mx:ComboBox id="box_direction" dataProvider="{directionData}" />     

</mx:ControlBar>     

<mx:HorizontalList id="list_toolTip" dataProvider="{listData}"           width="90"         paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"           horizontalCenter="0" verticalCenter="0">         

<mx:itemRenderer>             

<mx:Component>                 

<mx:VBox toolTip=" "                       toolTipCreate="{CustomToolTip.createToolTip(event, data)}"                       toolTipShow="{CustomToolTip.showToolTip(event, 5, data.direction)}" >                     

<mx:ｓｃｒｉｐｔ>                         

<![CDATA[                              

import cheng.tooltips.CustomToolTip;                          

]]>                     

</mx:ｓｃｒｉｐｔ>                     

<mx:Image width="70" height="80" source="{data.image}" />                     

<mx:Label width="70" fontSize="14" text="{data.label}"                         fontWeight="bold" textAlign="center"                           />                 </mx:VBox>             

</mx:Component>         

</mx:itemRenderer>     

</mx:HorizontalList> 

</mx:Application> 

2. CustomToolTip.mxml(自定义ToolTip控件)

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"     implements="mx.core.IToolTip"       fontSize="12" borderStyle="solid"       cornerRadius="8" backgroundAlpha="0.7"       width="268" height="190">     

<mx:ｓｃｒｉｐｔ>         

<![CDATA[              

import mx.core.UIComponent;              

import mx.events.ToolTipEvent;              

import mx.core.IToolTip;                            // 仅仅为了实现 mx.core.IToolTip 接口的方法              

public function set text(value:String):void{}              

public function get text():String{return "";}                            static public const TOP:uint = 1;              

static public const BOTTOM:uint = 2;              

static public const LEFT:uint = 3;              

static public const RIGHT:uint = 4;              

static public const TOP_LEFT:uint = 5;              

static public const TOP_RIGHT:uint = 6;              

static public const BOTTOM_LEFT:uint = 7;              

static public const BOTTOM_RIGHT:uint = 8;                            

static public function createToolTip(event:ToolTipEvent, data:Object):void              {                  

var tip:CustomToolTip = new CustomToolTip;                  

tip.data = data;                  

event.toolTip = tip;              

}                            

/**               

* 显示一个tooltip               *                

* @param event         触发的对应事件               

* @param offset        tooltip相对于原组件的位移               

* @param direction     tooltip 显示的方向               

* */              

static public function showToolTip(event:ToolTipEvent, offset:Number = 10,                   direction:uint = BOTTOM_RIGHT):void              {                  

var target:UIComponent = event.currentTarget as UIComponent;                  

if (target)                  {                      

var tip:IToolTip = event.toolTip;                      

var p:Point = target.localToGlobal(new Point);                                            

switch(direction)                      {                          

case TOP:                          

tip.x = p.x + (target.width - tip.width)/2;                          

tip.y = p.y - offset - tip.height;                          

break;                                                    

case BOTTOM:                          

tip.x = p.x + (target.width - tip.width)/2;                          

tip.y = p.y + offset + target.height;                          

break;                                                    

case LEFT:                          

tip.x = p.x - offset - tip.width;                          

tip.y = p.y + (target.height - tip.height)/2;                          

break;                                                    

case RIGHT:                          

tip.x = p.x + offset + target.width;                          

tip.y = p.y + (target.height - tip.height)/2;                          

break;                                                    

case TOP_LEFT:                          

tip.x = p.x - offset - tip.width;                          

tip.y = p.y - offset - tip.height;                          

break;                                                    

case TOP_RIGHT:                          

tip.x = p.x + offset + target.width;                          

tip.y = p.y - offset - tip.height;                          

break;                                                    

case BOTTOM_LEFT:                          

tip.x = p.x - offset - tip.width;                          

tip.y = p.y + offset + target.height;                          

break;                                                    

case BOTTOM_RIGHT:                          

tip.x = p.x + offset + target.width;                          

tip.y = p.y + offset + target.height;                          

break;                                                    

default:                          

tip.x = p.x + offset + target.width;                          

tip.y = p.y + offset + target.height;                          

break;                      

}                  

}              

}          

]]>     

</mx:ｓｃｒｉｐｔ>     

<mx:Canvas left="5" top="5" right="5" bottom="5"           backgroundColor="#FFFFFF" cornerRadius="8" borderStyle="solid">         

<mx:Image x="10" y="10" width="110" height="120"              horizontalAlign="center" source="{data.image}"/>         

<mx:Label x="10" y="143" width="110" text="{data.label}"               fontWeight="bold" textAlign="center" />         

<mx:Text left="134" top="10" right="10" bottom="10" text="{data.desc}"/>     

</mx:Canvas> 

</mx:Canvas>