Flex实现自定义ToolTip 动态加载

 Flex中实现自定义ToolTip，也很简单，只要按如下三个步骤即可：

 1.容器类实现mx.core.IToolTip接口，如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          title="问题网元异常指标情况："
          headerHeight="25"
          implements="mx.core.IToolTip"
          layout="horizontal" 
          horizontalGap="1"
          width="100%" height="60">
    <fx:Script>
        <![CDATA[
            
            [Bindable]
            public var kpiName:String = "";
            
            [Bindable]
            public var kpiValue:String = "";
            
            //Implement required methods of the IToolTip interface;接口需要实现的方法 必须写！
            public var _text:String;
            
            [Bindable]
            public function get text():String 
            {
                return _text;
            }
            public function set text(value:String):void 
            {
                
            }
        ]]>
    </fx:Script>
    <mx:HBox width="60%" height="100%" 
             verticalAlign="middle"
             horizontalAlign="center"
             borderStyle="solid">
        <mx:Label text="{kpiName}" 
        　　　　　　width="100%" id="lbl_kpiName" textAlign="center"/>
    </mx:HBox>
    <mx:HBox width="40%" height="100%" 
             verticalAlign="middle"
             horizontalAlign="center"
             borderStyle="solid">
        <mx:Label text="{kpiValue}" 
              width="100%" id="lbl_kpiValue" textAlign="center"/>
    </mx:HBox>
</mx:Panel>

 

2.要实现动态加载ToolTip，需要设置ToolTip载体控件的事件，例如：

<mx:Label id="labNe" text="{data.neName}" 
　　　　　　buttonMode="true"  fontWeight="bold"
　　　　　　toolTipCreate="createCustomTip(data.kpiName,data.kpiValue,event)"
　　　　　　toolTipShow="positionTip(event)"
　　　　　　toolTipEnd="labNe_toolTipEndHandler(event)" 
　　　　　　toolTip=" "/> //注意一定要设置此属性（而且不能为空），否则无法显示

 

 3.完成ToolTip创建、显示、销毁的三个方法：

　　　　　　　　　　　　　　　　　　　　　import mx.events.ToolTipEvent;
                                    import mx.managers.ToolTipManager;
                                    
                                    protected var kpiTootip:ImportAttentonTootip = new ImportAttentonTootip();
                                    
                                    //创建提示卡
                                    protected function createCustomTip(kpiName:String,kpiValue:String,event:ToolTipEvent):void 
　　　　　　　　　　　　　　　　　　　　 {
                                        kpiTootip.kpiName = kpiName;
                                        kpiTootip.kpiValue = kpiValue;
                                        event.toolTip = kpiTootip;
                                    }
                                    
                                    //确定位置 此方法完成显示坐标的设置，如果设置不正确 可能会引发频繁调用
                                    protected function positionTip(event:ToolTipEvent):void
　　　　　　　　　　　　　　　　　　　　　{                                        
                                        //由于诸多点 都放在了Canvas之上 所以要受Canvas坐标影响 使用localToGlobal方法做转换             
                                        var objSource:DisplayObject=event.currentTarget as DisplayObject;
                                        var pt:Point = new Point();
                                        
                                        pt.x = 0;
                                        pt.y = 0;
                                        pt = objSource.localToGlobal(pt); //受Canvas坐标影响 使用localToGlobal方法做转换
                                        
                                        event.toolTip.x = pt.x  + objSource.width+ 10;
                                        event.toolTip.y = pt.y - objSource.height/2;
                                        
                                        /*如果没有Canvas(也就是父容器)影响的话 可以直接设置坐标
                                        event.toolTip.x=event.currentTarget .x  + event.currentTarget .width+ 10;
                                        event.toolTip.y=event.currentTarget .y-event.currentTarget .height/2;
                                        */
                                    }
                                    
                                    protected function labNe_toolTipEndHandler(event:ToolTipEvent):void
                                    {
                                        var ttip:ImportAttentonTootip = event.toolTip as ImportAttentonTootip; 
                                        if(ttip) ToolTipManager.destroyToolTip(ttip); 
                                        ttip = null; 
                                    }

用此三招，建立动态绑定的自定义ToolTip，无往而不胜！

转自：http://blog.csdn.net/ozzy_003/article/details/6058880