1.toolTip换行符 

<mx:Button id="btn1" toolTip="在工具条提示中&#13; 使用换行符"/> 

2.设定工具条提示的样式 

    
           ToolTip      {          fontSize:19;          color:#FF6699;      }  
    

3.设定工具提示宽度 

4.

使用工具条提示事件 

toolTipCrate 

toolTipEnd 

toolTipHide 

toolTipShow 

toolTipShown 

toolTipStart 

5.

ToolTip Manager 

ToolTip Manager 类用来管理toolTip属性,包含在mx.managers包中 

使用ToolTip Manager 延迟工具条显示的时间,在工具条上使用行为效果 

建立动态的工具条提示，使用自定义的工具条提示 

公共属性 

    currentTarget : DisplayObject 

当前显示工具提示的 UIComponent；如果未显示工具提示，则为 null。 ToolTipManager 

    currentToolTip : IToolTip 

当前可见的 ToolTip 对象；如果未显示 ToolTip 对象，则为 null。 ToolTipManager 

    enabled : Boolean 

如果为 true，则当用户将鼠标指针移至组件上方时，ToolTipManager 会自动显示工具提示。 ToolTipManager 

    hideDelay : Number 

自工具提示出现时起，Flex 要隐藏此提示前所需等待的时间量（以毫秒为单位）。 ToolTipManager 

    hideEffect : IAbstractEffect 

隐藏工具提示时播放的效果；如果工具提示在消失时不应显示任何效果，则为 null。 ToolTipManager 

   prototype : Object 

对类或函数对象的原型对象的引用。 Object 

    scrubDelay : Number 

在 Flex 再次等待 showDelay 持续显示工具提示之前，用户在各控件间移动鼠标时可以花费的时间（以毫秒为单位）。 ToolTipManager 

    showDelay : Number 

当用户将鼠标移至具有工具提示的组件上方时，Flex 等待 ToolTip 框出现所需的时间（以毫秒为单位）。 ToolTipManager 

    showEffect : IAbstractEffect 

显示工具提示时播放的效果；如果工具提示在显示时不应显示任何效果，则为 null。 ToolTipManager 

    toolTipClass : Class 

创建工具提示要用到的类。 

1.控制工具条的显示隐藏 
ToolTip Manager  enabled属性来定义工具条提示状态，默认为true,设定为false就表示禁用 
2.延迟工具条的提示时间 
showDelay 默认为500毫秒 当鼠标在控件之间移动时，flex等待显示工具条提示的时间长度 
hideDelay 默认值为10000毫秒 如果设定hideDelay属性值为0，flex不显示工具条提示，如果设定为Infinity,flex则一致显示工具提示 
直到下一个动作，或者鼠标离开主键 
例如： 
ToolTipManager.showDelay=0;//立即显示 
ToolTipManager.hideDelay=3000;//3s秒后隐藏 
3.在工具条上使用动画效果 

4.建立动态工具条体提示 

ToolTipManager有两种方法,即：createToolTip()和destroyToolTip() 

建立一个工具条提示对象时,可以定义其属性,样式,事件和效果。 

crateToolTip()方法结构 

createToolTip(text:String, x:Number, y:Number, errorTipBorderStyle:String = null, context:IUIComponent = null):IToolTip 

[] 使用指定的文本创建 ToolTip 类的实例，然后在舞台坐标中的指定位置显示此实例。 ToolTipManager 

    destroyToolTip(toolTip:IToolTip):void 

[] 销毁由 createToolTip() 方法创建的指定 ToolTip。 

例如： 

<mx:Label id="lbl" toolTip="demo ToolTip" text="mouse over here" /> 

<mx:Button id="btn1" toolTip="填写的是{lbl.text}"/> 

5.建立用户自定义的工具条提示 

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:Script>
     <![CDATA[
         import mx.managers.ToolTipManager;
         import mx.events.ToolTip;
         public var myTip:ToolTip;

         public function init():void
         {
             var s:String ="保存,应用,退出";
             myTip=ToolTipManager.createToolTip(s,10,10) as ToolTip;
             myTip.setStyle("backgroundColor",0xFFCC00);
             myTip.width=300;
             myTip.height=40;
         }

         public funciton destroyBigTip():void
         {
             ToolTipManager.destroyToolTip(myTip);
         }
         ]]>
 </mx:Script>
     <mx:Button id="btn" toolTip="test toolTip" rollOver="init()" rollOut="destroyBigTip()"/>

6.使用错误信息提示工具条 

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:Script>
     <![CDATA[
         import mx.managers.ToolTipManager;
         import mx.events.ToolTip;
         public var errorTip:ToolTip;
     private function validatefun(type:String,event:Object):void
     {
         errorTip=" demo test ";
         errorTip=ToolTipManager.createToolTip(errorTip,event.currentTarget.x,event.currentTarget.y) as ToolTip;
         errorTip.setStyle("styleName","errorTip");
     }
 <mx:TextInput id="txt" enter="validatefun('demo',event)" />

7.重写工具条皮肤 

ToolTip皮肤存在mx.skins.ToolTipBorder.as文件中 

当然需要重写的时候就可以 ToolTipBorder 类继承的类就可以了 

例如: 

 package
 {
     import mx.skins.RectangularBorder;

     public class MyToolTipBorder extends RectangularBorder
     {
         public function MyToolTipBorder()
         {
             super();
         }

         override protected function updateDisplayList(unscaledWidth:Number,
                                                   unscaledHeight:Number):void
         {

         }

          override   public function layoutBackgroundImage():void {

             }
     }
 }mxml中使用
 <mx:Style>
     ToolTip
     {
         borderSkin:ClassReference("MyToolTipBorder");
     }
 </mx:Style>

自定义皮肤 参见：http://demojava.iteye.com/blog/1175446 

自定义DateGird Item ToolTip

 

效果图： 

 

自定义ToolTip

 

renderers.MenuToolTipRenderer as 实现接口   IMenuItemRenderer, IDataRenderer, IListItemRenderer 

 package renderers
 {
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.text.TextFieldAutoSize;

 import mx.controls.Alert;
 import mx.controls.LinkButton;
 import mx.controls.Menu;
 import mx.controls.listClasses.IListItemRenderer;
 import mx.controls.menuClasses.IMenuItemRenderer;
 import mx.core.EdgeMetrics;
 import mx.core.IDataRenderer;
 import mx.core.UIComponent;
 import mx.core.UITextField;
 import mx.events.FlexEvent;


 public class MenuToolTipRenderer extends UIComponent implements IMenuItemRenderer, IDataRenderer, IListItemRenderer
 {


     private var textField:UITextField;
     private var clickText:LinkButton;
     public function get measuredTypeIconWidth():Number//类型图标（单选/复选）的宽度
     {
         return 33;
     }
     public function get measuredBranchIconWidth():Number//分支图标的宽度
     {
         return 33;
     }
     public function get measuredIconWidth():Number//图标的宽度
     {
         return 33;
     }


     //-------------------------------------------------------------------------

     public function MenuToolTipRenderer()
     {
         super();
         this.addEventListener(FlexEvent.DATA_CHANGE, renderComponent);
         this.setStyle("cornerRadius", 5);
         this.maxWidth = 250;

     }

     //-------------------------------------------------------------------------

     // Internal variable for the property value.
     private var _menu:Menu;

     public function get menu():Menu
     {
         return _menu;
     }

     public function set menu(value:Menu):void
     {
         _menu = value;
     }

     //-------------------------------------------------------------------------


     private var _data:Object;


     [Bindable("dataChange")]
     public function get data():Object {
     return _data;
     }

     public function set data(value:Object):void {
     _data = value;

     dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
     }

     //-------------------------------------------------------------------------

     private function get borderMetrics():EdgeMetrics
     {
         return EdgeMetrics.EMPTY;
     }

     //-------------------------------------------------------------------------

     private function renderComponent(event:FlexEvent):void
     {
         if(_data != null && _data != "null")
         {
             textField.htmlText = data.label;
             invalidateProperties();
             invalidateSize();
             invalidateDisplayList();

         }
     }

     //-------------------------------------------------------------------------

     private function buttonClick(event:Event):void
     {
         mx.controls.Alert.show("button click");
     }

     //-------------------------------------------------------------------------

     override protected function createChildren():void
     {
         super.createChildren();

         // Create the TextField that displays the tooltip text.
         if (!textField)
         {
             textField = new UITextField();
             textField.autoSize = TextFieldAutoSize.LEFT;
             textField.mouseEnabled = false;
             textField.multiline = true;
             textField.selectable = false;
             textField.wordWrap = true;
             textField.styleName = this;
             addChild(textField);
         }
     }

     //-------------------------------------------------------------------------


     override protected function measure():void
     {
         super.measure();

         var bm:EdgeMetrics = borderMetrics;

         var leftInset:Number = bm.left + getStyle("paddingLeft");
         var topInset:Number = bm.top + getStyle("paddingTop");
         var rightInset:Number = bm.right + getStyle("paddingRight");
         var bottomInset:Number = bm.bottom + getStyle("paddingBottom");

         var widthSlop:Number = leftInset + rightInset;
         var heightSlop:Number = topInset + bottomInset;

         textField.wordWrap = false;

         if (textField.textWidth + widthSlop > this.maxWidth)
         {
             textField.width = this.maxWidth - widthSlop;
             textField.wordWrap = true;
         }

         measuredWidth = textField.width + widthSlop;
         measuredHeight = textField.height + heightSlop;

         thisthis.parent.parent.height = this.parent.height = this.height = measuredHeight + 25;
         thisthis.parent.parent.width = this.parent.width = this.width = measuredWidth;

         createAdditionalContent(measuredWidth, measuredHeight);
     }

     private function createAdditionalContent(measuredWidth:Number, measuredHeight:Number):void
     {
         clickText = new LinkButton();
         clickText.label = "More Info";
         clickText.width = 70;
         clickText.height = 18;
         clickText.setStyle("fontSize", 9);
         clickText.setStyle("color", "blue");
         clickText.buttonMode = true;
         clickText.visible = true;
         clickText.y = measuredHeight;
         clickText.x = measuredWidth - clickText.width - 8;

         clickText.addEventListener(MouseEvent.CLICK, dispatchClick);

         addChild(clickText);
     }

     private function dispatchClick(e:Event):void
     {
         this.dispatchEvent(new Event("buttonClicked", true))
     }
 }
 }

Application.xml 

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()"
             viewSourceURL="srcview/index.html" width="600" height="300">

 <mx:DataGrid id="dg" dataProvider="{tmpArray}" width="550"
              mouseOut="dgMouseOut(event)" mouseOver="dgMouseOver(event)" mouseMove="dgMouseMove(event)">
     <mx:columns>
         <mx:Array>
             <mx:DataGridColumn headerText="Label" dataField="label" showDataTips="true" />
             <mx:DataGridColumn headerText="Data" dataField="data" />
         </mx:Array>
     </mx:columns>
 </mx:DataGrid>

 <mx:Style>

     .menuToolTip {
            backgroundAlpha: 1;
            backgroundColor: #ffffcc;
            useRollOver: false;
            borderStyle: solid;
            borderThickness: 0;
            borderColor: #000000;
            selectionColor: #7fcdfe;
            dropShadowEnabled: true;
            cornerRadius: 5;
            paddingLeft: 3; paddingRight: 3; paddingTop: 3; paddingBottom: 3;

         }

 </mx:Style>

 <mx:Script>
     <![CDATA[
         import mx.automation.delegates.controls.ListBaseContentHolderAutomationImpl;
         import mx.controls.listClasses.ListBase;
         import renderers.MenuToolTipRenderer;
         import mx.controls.dataGridClasses.DataGridItemRenderer;

         import mx.managers.ToolTipManager;
         import mx.controls.Menu;
         import mx.events.MenuEvent;
         import flash.geom.Point;

         [Bindable] private var dgMouseX:Number = 0;
         [Bindable] private var dgMouseY:Number = 0;

         private var toolTipMenu:Menu;
         private var toolTipTimer:Timer;

         [Bindable]
         public var tmpArray:Array = [{label: '<b>mary</b> had a little lamb', data: 55, link:'http://www.meutzner.com/blog'},
                                      {label: 'All the kings men, and all the kings horses', data: 56, link:'http://www.meutzner.com/blog'},
                                      {label: 'baa baa black sheep, have you any wool', data: 57, link:'http://www.meutzner.com/blog'},
                                      {label: 'jack and jill went up the hill', data: 58, link:'http://www.meutzner.com/blog'},
                                      {label: 'little miss muffet, sat on a tuffet, eating her curds and whey', data: 59, link:'http://www.meutzner.com/blog'}
                                     ];

         //-------------------------------------------------------------------------

         public function init():void
         {
             ToolTipManager.enabled = false;
         }

         //-------------------------------------------------------------------------

         private function createMenu(data:Object):void
     {
     toolTipTimer.stop();
     var menuData:Array = [{label: data.label, link: data.link}];



     toolTipMenu = Menu.createMenu(this, menuData, false);
     toolTipMenu.labelField="label";
     toolTipMenu.width = 250;
     toolTipMenu.setStyle("fontSize", 10);
     toolTipMenu.setStyle("themeColor", 0xFF9900);
     toolTipMenu.itemRenderer = new ClassFactory(renderers.MenuToolTipRenderer);
     toolTipMenu.data = data;
     toolTipMenu.selectable = false;
     toolTipMenu.setStyle("styleName", "menuToolTip");
     toolTipMenu.setStyle("openDuration", 0);

     //toolTipMenu.setStyle("selectionEasingFunction", myEasingFunction);
     toolTipMenu.addEventListener(MouseEvent.ROLL_OUT, hideToolTip);
     toolTipMenu.addEventListener("buttonClicked", catchButtonClick);

     var pt1:Point = new Point(this.dgMouseX, this.dgMouseY);
             pt1 = dg.localToGlobal(pt1);
             //offset this for now to fix slight bug where immediate mouseover of tooltip causes it to hide
     toolTipMenu.show(pt1.x+10, pt1.y+0);

     }

     //-------------------------------------------------------------------------

     private function hideToolTip(event:MouseEvent):void
     {
     //trace("MENU --- " + event.relatedObject + " - " + event.target + " - " + event.currentTarget);
     toolTipMenu.hide();
     }

     //-------------------------------------------------------------------------

     private function dgMouseMove(event:MouseEvent):void
     {
     this.dgMouseX = dg.mouseX;
     this.dgMouseY = dg.mouseY;
     }


     //-------------------------------------------------------------------------

     private function dgMouseOver(event:MouseEvent):void
     {
     this.dgMouseX = dg.mouseX;
     this.dgMouseY = dg.mouseY;
     //trace("DATAGRID OVER --- " + event.target + " - " + event.currentTarget + " - " + event.relatedObject);
     if(event.target is DataGridItemRenderer)
     {
         if(toolTipMenu != null)
         {
             if(toolTipMenu.visible && toolTipMenu.data == event.target.data)
                 return;
         }
         if(!DataGridItemRenderer(event.target).styleName.showDataTips)
             return;

         toolTipTimer = new Timer(1000, 0);
         toolTipTimer.addEventListener(TimerEvent.TIMER, function():void
                                                                  {
                                                                     createMenu(event.target.data);
                                                                  }
                                       );
         toolTipTimer.start();
     }
     }

     //-------------------------------------------------------------------------

     private function dgMouseOut(event:MouseEvent):void
     {
     if(toolTipTimer) toolTipTimer.stop();
     //trace("DATAGRID OUT --- " + event.target + " - " + event.currentTarget + " - " + event.relatedObject);
     if(event.relatedObject is mx.controls.listClasses.ListBaseContentHolder || event.relatedObject is MenuToolTipRenderer)
     {
         return;
     }
     if(event.target is DataGridItemRenderer)
     {
         if(event.relatedObject is Menu || !event.relatedObject is MenuToolTipRenderer) return;
         if(toolTipMenu != null) toolTipMenu.hide();
         }
     }

     //-------------------------------------------------------------------------

     private function catchButtonClick(e:Event):void
         {
     mx.controls.Alert.show(e.target.data.label + " was clicked to take you to " + e.target.data.link);
     }


     ]]>
 </mx:Script>

 </mx:Application>

附件为源文件

 

1. 设置ToolTip风格(通过css来设置) 

   ToolTip {  

    fontFamily: "Arial";  

    fontSize: 13;  

    fontStyle: "italic";  

    color: #FF6699;  

    backgroundColor: #33CC99;  

} 

当然这个可以通过css来动态设置例如： 

StyleManager.getStyleDeclaration("ToolTip").setStyle("fontStyle","italic");  

2. 错误提示errotTip 

 

errorTip 

{ 

border-style:"errorTipRight"; 

} 

其中border-style其对应的格式决定小三角的方位,可选值：[toolTip,errorTipRight,errorTipAbove,errorTipBelow] 

<mx:TextInput x="85" y="118" text="021-阿萨德发送" errorString="输入有误！" /> 

如果想修改源码,改变小三角的大小或者位置的话就需要自定义border-skin 

ToolTip 

{ 

border-skin:ClassReference("com.MyToolTipBorder"); 

} 

其中 com.MyToolTipBorder其中是一个继承了RectangularBorder的类,源码参见附件， ToolTip默认的skin-class路径在sdk 

sdks\3.0.0\frameworks\projects\framework\src\mx\skins\halo\ToolTipBorder 

引入包的路径：import mx.skins.halo.ToolTipBorder; 

笔者发现 ToolTipBorder 的类对于4个方向支持不是很好，其中最右边的提示，也就是小三角在右边的没有,把源码修改了下(附件中有MyToolTipBorder) 

改变默认的错误提示的背景色设置4个方向的提示 

 

 

 

 

3. 使用ToolTipManager动态创建自定义的tooltip; 

使用ToolTipManager管理器类能够让你设置基本的ToolTip功能。比如显示延迟，以及控制是否显示ToolTip信息内容。 

你可以在程序中激活和停止使用ToolTips. 

可以使用enabled这个属性来激活或者停止使用ToolTips，如果停止使用，在鼠标移到到组件上方的时候就不会用ToolTips的框显示出来，不管那个组件是否设置了toolTip这个属性值 

设置ToolTipManager的常用属性介绍 

ToolTipManager.enabled = true;//鼠标移入控件自动显示工具提示 

ToolTipManager.showDelay = 0; //flex 等待tooltip出现的时间单位毫秒默认500 

ToolTipManager. hideDelay=3000; //flex 隐藏tooltip所需的事件等待量 单位毫秒，默认500 

ToolTipManager.showEffect= fadeIn; //显示tooltip的特效 

ToolTipManager. hideEffect= fadeIn; //隐藏 tooltip的特效 

<mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/> 

4. 使用ToolTipManager createToolTip，destroyToolTip来动态创建自定义tooltip 

一般自定义tooltip都是在控件的 

MouseEvent. ROLL_OVER(rollOver) 

MouseEvent. MOUSE_OVER (mouseOver) 

控制自定义tooltip的显示 

MouseEvent. ROLL_OUT (rollOut) 

MouseEvent. MOUSE_OUT (mouseOut) 

控制自定义tooltip的隐藏 

现已rollOver结合ToolTipManager实现自定义tooltip 

 <mx:Script>
     <![CDATA[
 import mx.managers.ToolTipManager;
 public var myTip:ToolTip;
 private function showTip(event:MouseEvent,type:String):void
 {
 Tip=ToolTipManager.createToolTip(str,event.stageX,event.stageY) as ToolTip;
 //根据需要动态设置tooltip的style属性
 myTip.move(event.stageX,event.stageY);
 }
 private function hideTip():void
     {
         ToolTipManager.destroyToolTip(myTip);
     }
     ]]>
 </mx:Script>

5. 实现mx.core.IToolTip接口自定义toolTip的外观(可选as实现该接口，mxml实现该接口) 

现已mxml实现该接口为例(简单), MyPanelToolTip.mxml 

 <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
     implements="mx.core.IToolTip"
     width="212"
     borderThickness="2"
    backgroundColor="0xCCCCCC"
    dropShadowEnabled="true"
    borderColor="black"
    roundedBottomCorners="true"
     height="90">
    <mx:Script>
    <![CDATA[
    //注意 Panel 中的  implements="mx.core.IToolTip"
    [Bindable]
    private var _text:String="";
    public function get text():String {
    return _text ;
    }
    public function set text(value:String):void {
         this._text=value;
    }
    ]]></mx:Script>
    <mx:Text text="{text}" percentWidth="100"/>
    </mx:Panel>

使用时： 

private function createCustomTip(title:String, body:String, event:ToolTipEvent):void 

{ 

var pan:MyPanelToolTip = new MyPanelToolTip(); 

           pan.title = title; 

           pan.text=body; 

           event.toolTip = pan; 

} 

<mx:Button id="btn3" label="button" x="275.5" toolTip="demo" toolTipCreate="createCustomTip('自定义tooltip','该tooltip实现mx.core.IToolTip接口,注意是控件必须设置toolTip属性的值',event)" y="187"/> 

6. 自定义组件(继承UIComponent)结合mouseover事件形式   

效果图：