[转]flex ToolTip专题

AS3

http://nianshi.iteye.com/blog/743808

1 创建ToolTips

    每一个可视化的Flex组件都继承了UIComponent类（它实现了IToolTipManagerClient接口）来支持toolTip属性。这个属性从UIComponent类继承而来。你设置了toolTip的属性为一个文本内容，当鼠标移动到该组件上方的时候，这些文字信息就会被显示。
    你也可以在ActionScript中来设置toolTip.
    假如你没有在一个容器中定义ToolTip, 则容器的子组件将显示容器的ToolTip。举个例子，比如你添加了一个button到一个Panel容器中，而这个容器包含了一个ToolTip，当鼠标移动到这个Panel时用户将看到这个Panel 容器的ToolTip内容。当用户移动鼠标指针到这个button控件时候，Panel容器的ToolTip将继续显示。当然你可以通过设置button 的ToolTip的属性值来重写容器Panel的ToolTip 内容。
TabNavigator容器却在它的子(children)上使用ToolTip。假如你添加ToolTip到TabNavigator的一个子版面中，当鼠标移动到那个版面的tab的上方的时候，ToolTip将被显示出来，而不是鼠标移动到那个版面本身上的时候显示ToolTip信息。假如你添加了ToolTip到TabNavigator容器中，除非ToolTip在那个版面被重写否则不可能当鼠标移动到tab或者版面上都显示 ToolTip信息。同样在以下的控件中也是类似的效果。
Accordion
ButtonBar
LinkBar
TabBar
ToggleButtonBar

2 设置ToolTip风格


    你可以通过CSS语法或者mx.style.StyleManager类来改变ToolTip的内容和外框(Box)的显示风格。默认的风格设置定义在framework.swc文件中的default.css的文件中。
Java代码

   1. <mx:Style>  
   2. ToolTip {  
   3. fontFamily: "Arial";  
   4. fontSize: 19;  
   5. fontStyle: "italic";  
   6. color: #FF6699;  
   7. backgroundColor: #33CC99;  
   8. }  
   9. </mx:Style>  

<mx:Style>
ToolTip {
fontFamily: "Arial";
fontSize: 19;
fontStyle: "italic";
color: #FF6699;
backgroundColor: #33CC99;
}
</mx:Style>



要使用StyleManager类来设置ToolTip风格，要使用setStyle()这个函数，比如：
Java代码

   1. private function setToolTipStyle():void {  
   2. StyleManager.getStyleDeclaration("ToolTip").setStyle("fontStyle","italic");  
   3. StyleManager.getStyleDeclaration("ToolTip").setStyle("fontSize","19");  
   4. StyleManager.getStyleDeclaration("ToolTip").setStyle("fontFamily","Arial");  
   5. StyleManager.getStyleDeclaration("ToolTip").setStyle("color","#FF6699");  
   6. StyleManager.getStyleDeclaration("ToolTip").setStyle("backgroundColor","#33CC99");  
   7. }  

private function setToolTipStyle():void {
StyleManager.getStyleDeclaration("ToolTip").setStyle("fontStyle","italic");
StyleManager.getStyleDeclaration("ToolTip").setStyle("fontSize","19");
StyleManager.getStyleDeclaration("ToolTip").setStyle("fontFamily","Arial");
StyleManager.getStyleDeclaration("ToolTip").setStyle("color","#FF6699");
StyleManager.getStyleDeclaration("ToolTip").setStyle("backgroundColor","#33CC99");
}



ToolTip使用可继承的全局的styles。比如你通过StyleManager在全局的选择器上（global selector）设置了ToolTip的fontWeight属性:
Java代码

   1. private function setToolTipStyle():void {  
   2. StyleManager.getStyleDeclaration("global").setStyle("fontWeight","bold");  
   3. }  

private function setToolTipStyle():void {
StyleManager.getStyleDeclaration("global").setStyle("fontWeight","bold");
}



3 ToolTip事件的使用


在ToolTip的生命周期中会触发很多事件，这些事件都是ToolTipEvent类型的。

除了type和target两个属性外，ToolTipEvent对象涉及到了toolTip属性。利用这个属性，就可以通过text属性拿到ToolTip里面的文本内容值。

Java代码

   1. <?xml version="1.0"?>  
   2.   
   3. <!-- tooltips/ToolTipsWithSoundEffects.mxml -->  
   4.   
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">  
   6. <mx:Script>  
   7. <![CDATA[  
   8.    import mx.events.ToolTipEvent;  
   9.    import flash.media.Sound;  
  10.    [Embed(source="../assets/sound1.mp3")]  
  11.     private var beepSound:Class;  
  12.     private var myClip:Sound;  
  13.     public function playSound():void {  
  14.       myClip.play();  
  15.    }  
  16.      
  17.    private function myListener(event:ToolTipEvent):void {  
  18.      playSound();  
  19.    }  
  20.     private function init():void {  
  21.        myLabel.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,   
  22.        myListener);  
  23.        myClip = new beepSound();  
  24.     }  
  25. ]]>  
  26. </mx:Script>  
  27.     <mx:Label id="myLabel" toolTip="ToolTip" text="Mouse Over Me"/>  
  28. </mx:Application>  

<?xml version="1.0"?>

<!-- tooltips/ToolTipsWithSoundEffects.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
<mx:Script>
<![CDATA[
   import mx.events.ToolTipEvent;
   import flash.media.Sound;
   [Embed(source="../assets/sound1.mp3")]
    private var beepSound:Class;
    private var myClip:Sound;
    public function playSound():void {
      myClip.play();
   }
   
   private function myListener(event:ToolTipEvent):void {
     playSound();
   }
    private function init():void {
       myLabel.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,
       myListener);
       myClip = new beepSound();
    }
]]>
</mx:Script>
    <mx:Label id="myLabel" toolTip="ToolTip" text="Mouse Over Me"/>
</mx:Application>





4 使用ToolTip 管理器


使用ToolTipManager管理器类能够让你设置基本的ToolTip功能。比如显示延迟，以及控制是否显示ToolTip信息内容。
你可以在程序中激活和停止使用ToolTips. 可以使用enabled这个属性来激活或者停止使用ToolTips，如果停止使用，在鼠标移到到组件上方的时候就不会用ToolTips的框显示出来，不管那个组件是否设置了toolTip这个属性值。
Java代码

   1. if (ToolTipManager.enabled) {  
   2.     ToolTipManager.enabled = false;  
   3. } else {  
   4.     ToolTipManager.enabled = true;  
   5. }  

if (ToolTipManager.enabled) {
    ToolTipManager.enabled = false;
} else {
    ToolTipManager.enabled = true;
}



延迟时间是来来衡量某一时间发生前所消耗的时间。比如，在用户移动鼠标指针到组件的上方，在ToolTip显示之前有一个简短的延迟。这就给那些不想看到ToolTip内容的用户足够的时间，在看到ToolTip信息之前把鼠标移开。

ToolTipManager 可以允许你设置这个ToolTip显示延迟的时间的长度，以及ToolTip在屏幕上显示的事件长度。你还可以设置ToolTips之间的延迟时间。

你可以在ActionScript的代码块中设置ToolTipManager的这些属性值：showDealy,hideDelay和 scrubDelay。具体的功能描述请参考官方的develop guide。以下是一个例子利用Application k控制的初始化方法来设置ToolTip的初始值。

Java代码

   1. private function initApp():void {  
   2. ToolTipManager.enabled = true;// Optional. Default value is true.  
   3. ToolTipManager.showDelay = 0;// Display immediately.  
   4. ToolTipManager.hideDelay = 3000; // Hide after 3 seconds of being viewed.  
   5. }  

private function initApp():void {
ToolTipManager.enabled = true;// Optional. Default value is true.
ToolTipManager.showDelay = 0;// Display immediately.
ToolTipManager.hideDelay = 3000; // Hide after 3 seconds of being viewed.
}



你可以使用自定义的视觉效果或者标准的Flex效果。你可以设置ToolTipManager的showEffect或者hideEffect属性值来定义当ToolTip显示或者隐藏是所触发的效果。

以下就是使用退出(Fade)的效果：
Java代码

   1. <?xml version="1.0"?>  
   2. <!-- tooltips/FadeInToolTips.mxml -->  
   3.   
   4.   
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="600"  
   6. initialize="app_init();">  
   7. <mx:Script><![CDATA[  
   8. import mx.managers.ToolTipManager;  
   9. public function app_init():void {  
  10. ToolTipManager.showEffect = fadeIn;  
  11. }  
  12. ]]></mx:Script>  
  13. <mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/>  
  14. <mx:Button id="b1" label="Click Me" toolTip="This is a ToolTip that fades in."/>  
  15. </mx:Application>  

<?xml version="1.0"?>
<!-- tooltips/FadeInToolTips.mxml -->


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="600"
initialize="app_init();">
<mx:Script><![CDATA[
import mx.managers.ToolTipManager;
public function app_init():void {
ToolTipManager.showEffect = fadeIn;
}
]]></mx:Script>
<mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/>
<mx:Button id="b1" label="Click Me" toolTip="This is a ToolTip that fades in."/>
</mx:Application>



你不仅可是使用ToolTips静态的显示文本信息的功能，还可以使用ToolTips动态的绑定组件中的内容来动态显示ToolTips信息。这样可以让你ToolTips成为用户界面的一部分。给用户给多的个性化的体验。

你可以使用{}绑定ToolTips的值到另外一个组件的文本内容。以下的例子就是插入TextInput控件的文本值到按钮控件的ToolTips值。

Java代码

   1. <?xml version="1.0"?>  
   2. <!-- tooltips/BoundToolTipText.mxml -->  
   3.   
   4. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
   5. <mx:TextInput id="txtTo" width="300"/>  
   6. <mx:Button label="Send" toolTip="Send e-mail to {txtTo.text}"/>  
   7. </mx:Application>  

<?xml version="1.0"?>
<!-- tooltips/BoundToolTipText.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="txtTo" width="300"/>
<mx:Button label="Send" toolTip="Send e-mail to {txtTo.text}"/>
</mx:Application>



另外一个方法就是获取ToolTips的toolTipShow事件处理来改变text属性值。以下就是一个通过 myToolTipChanger方法来监听按钮控件的toolTipShow事件，然后在这个方法内修改了 ToolTipManager.currentToolTip.text属性。这个属性值在运行前是未知的。

Java代码

   1. <?xml version="1.0"?>  
   2.   
   3. <!-- tooltips/DynamicToolTipText.mxml -->  
   4.   
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp()">  
   6.   
   7. <mx:Script><![CDATA[  
   8. import mx.managers.ToolTipManager;  
   9. import mx.controls.ToolTip;  
  10. import mx.events.ToolTipEvent;  
  11. public function initApp():void {  
  12. b1.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, myToolTipChanger)  
  13. }  
  14. public function myToolTipChanger(event:ToolTipEvent):void {  
  15. // Pass the value of myName in to your application in some way.  
  16. // For example, as a flashVar variable.  
  17. ToolTipManager.currentToolTip.text = "Click the button, " +  
  18. Application.application.parameters.myName;  
  19. }  
  20. ]]>   
  21. </mx:Script>  
  22.   
  23. <mx:Button id="b1" label="Click Me" toolTip="Click the button."/>  
  24. </mx:Application>  

<?xml version="1.0"?>

<!-- tooltips/DynamicToolTipText.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp()">

<mx:Script><![CDATA[
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;
import mx.events.ToolTipEvent;
public function initApp():void {
b1.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, myToolTipChanger)
}
public function myToolTipChanger(event:ToolTipEvent):void {
// Pass the value of myName in to your application in some way.
// For example, as a flashVar variable.
ToolTipManager.currentToolTip.text = "Click the button, " +
Application.application.parameters.myName;
}
]]>
</mx:Script>

<mx:Button id="b1" label="Click Me" toolTip="Click the button."/>
</mx:Application>



ToolTipmanger 有两个方法可以让你自定义ToolTips。这两个方法是createToolTip()和destoryToolTip()。即用来创建和销毁 ToolTips对象。当你创建一个ToolTip对象，你可以自定义它的显示效果，类型，事件等。
createToolTip()方法有以下的一些参数：

Java代码

   1. createToolTip(text:String, x:Number, y:Number, errorTipBorderStyle:String, context:IUIComponent):IToolTip  

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



你可以使用destroyTollTip（）方法来销毁之前指定的ToolTip对象。该方法：
Java代码

   1. destroyToolTip(toolTip:IToolTip):void   

destroyToolTip(toolTip:IToolTip):void



Java代码

   1. <?xml version="1.0"?>  
   2.   
   3. <!-- tooltips/CreatingToolTips.mxml -->  
   4. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
   5. <mx:Script><![CDATA[  
   6.   
   7. import mx.managers.ToolTipManager;  
   8. import mx.controls.ToolTip;  
   9. public var myTip:ToolTip;  
  10.   
  11. private function createBigTip():void {  
  12. var s:String = "These buttons let you save, exit, or continue with the current  
  13. operation."  
  14. myTip = ToolTipManager.createToolTip(s,10,10) as ToolTip;  
  15. myTip.setStyle("backgroundColor",0xFFCC00);  
  16. myTip.width = 150;  
  17. myTip.height = 200;  
  18. }  
  19.   
  20. private function destroyBigTip():void {  
  21. ToolTipManager.destroyToolTip(myTip);  
  22. }  
  23. ]]></mx:Script>  
  24. <mx:Style>  
  25. Panel {  
  26. paddingLeft: 5;  
  27. paddingRight: 5;  
  28. paddingTop: 5;  
  29. paddingBottom: 5;  
  30. }  
  31. </mx:Style>  
  32. <mx:Panel title="ToolTips" rollOver="createBigTip()" rollOut="destroyBigTip()">  
  33. <mx:Button label="OK" toolTip="Save your changes and exit."/>  
  34. <mx:Button label="Apply" toolTip="Apply changes and continue."/>  
  35. <mx:Button label="Cancel" toolTip="Cancel and exit."/>  
  36. </mx:Panel>  
  37. </mx:Application>  

<?xml version="1.0"?>

<!-- tooltips/CreatingToolTips.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[

import mx.managers.ToolTipManager;
import mx.controls.ToolTip;
public var myTip:ToolTip;

private function createBigTip():void {
var s:String = "These buttons let you save, exit, or continue with the current
operation."
myTip = ToolTipManager.createToolTip(s,10,10) as ToolTip;
myTip.setStyle("backgroundColor",0xFFCC00);
myTip.width = 150;
myTip.height = 200;
}

private function destroyBigTip():void {
ToolTipManager.destroyToolTip(myTip);
}
]]></mx:Script>
<mx:Style>
Panel {
paddingLeft: 5;
paddingRight: 5;
paddingTop: 5;
paddingBottom: 5;
}
</mx:Style>
<mx:Panel title="ToolTips" rollOver="createBigTip()" rollOut="destroyBigTip()">
<mx:Button label="OK" toolTip="Save your changes and exit."/>
<mx:Button label="Apply" toolTip="Apply changes and continue."/>
<mx:Button label="Cancel" toolTip="Cancel and exit."/>
</mx:Panel>
</mx:Application>




当然你也可以通过扩展已存在的控件并且实现IToolTip接口来实现自定义的ToolTip,比如Panel 或者VBox容器等。

Java代码

   1. <?xml version="1.0"?>  
   2.   
   3. <!-- tooltips/ToolTipComponents/PanelToolTip.mxml -->  
   4.   
   5. <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"  
   6. implements="mx.core.IToolTip"  
   7. width="200"  
   8. alpha=".8"  
   9. borderThickness="2"  
  10. backgroundColor="0xCCCCCC"  
  11. dropShadowEnabled="true"  
  12. borderColor="black"  
  13. borderStyle="solid"  
  14. title="feh"  
  15. >   
  16.   
  17. <mx:Script><![CDATA[  
  18. [Bindable]  
  19. public var bodyText:String = "";  
  20. // Implement required methods of the IToolTip interface; these  
  21.   
  22. // methods are not used in this example, though.  
  23. public var _text:String;  
  24. public function get text():String {  
  25. return _text  
  26. }  
  27. public function set text(value:String):void {  
  28. }  
  29. ]]></mx:Script>  
  30. <mx:Text text="{bodyText}" percentWidth="100"/>  
  31. </mx:Panel>  

<?xml version="1.0"?>

<!-- tooltips/ToolTipComponents/PanelToolTip.mxml -->

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.core.IToolTip"
width="200"
alpha=".8"
borderThickness="2"
backgroundColor="0xCCCCCC"
dropShadowEnabled="true"
borderColor="black"
borderStyle="solid"
title="feh"
>

<mx:Script><![CDATA[
[Bindable]
public var bodyText:String = "";
// Implement required methods of the IToolTip interface; these

// methods are not used in this example, though.
public var _text:String;
public function get text():String {
return _text
}
public function set text(value:String):void {
}
]]></mx:Script>
<mx:Text text="{bodyText}" percentWidth="100"/>
</mx:Panel>




5 使用Error Tips


Error tips是ToolTip类的一个实例。它可以从errorTip类选择器来获得styles. 他们经常出现在Flex的验证机制中用来显示警告信息。但是你也可以利用errorTip的style定义来创建自己的验证警告机制。

Error tips的风格定义在default.css这个文件中。它指定了以下默认的设置：

Java代码

   1. .errorTip { color: #FFFFFF;  
   2.   fontSize: 9;  
   3.   fontWeight: "bold";  
   4.   shadowColor: #000000;  
   5.   borderColor: #CE2929;   
   6.   borderStyle: "errorTipRight";  
   7.   paddingBottom: 4;  
   8.   paddingLeft: 4;  
   9.   paddingRight: 4;  
  10.   paddingTop: 4;   
  11. }  

.errorTip { color: #FFFFFF;
  fontSize: 9;
  fontWeight: "bold";
  shadowColor: #000000;
  borderColor: #CE2929;
  borderStyle: "errorTipRight";
  paddingBottom: 4;
  paddingLeft: 4;
  paddingRight: 4;
  paddingTop: 4;
}



你可以重写这些sytle来建立自己的定义的error tips显示风格。
Java代码

   1. <?xml version="1.0"?>  
   2.   
   3. <!-- tooltips/ErrorTipStyle.mxml -->  
   4.   
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">  
   6.   
   7. <mx:Script><![CDATA[  
   8.   
   9. import mx.controls.ToolTip;  
  10. import mx.managers.ToolTipManager;  
  11.   
  12. private var errorTip:ToolTip;  
  13. private var myError:String;  
  14.   
  15. private function validateEntry(type:String, event:Object):void {  
  16. if (errorTip) {  
  17. resetApp();  
  18. }  
  19.   
  20. // NOTE: Validation logic would go here.  
  21.   
  22. switch(type) {  
  23. case "ssn":  
  24. myError="Use SSN format (NNN-NN-NNNN)";  
  25. break;  
  26. case "phone":  
  27. myError="Use phone format (NNN-NNN-NNNN)";  
  28. break;  
  29. }  
  30.   
  31. // Use the target's x and y positions to set position of error tip.  
  32. trace("event.currentTarget.width" + event.currentTarget.width);  
  33. trace("event.currentTarget.x" + event.currentTarget.x);  
  34. errorTip = ToolTipManager.createToolTip(  
  35. myError, event.currentTarget.x + event.currentTarget.width,  
  36. event.currentTarget.y) as ToolTip;  
  37. // Apply the errorTip class selector.  
  38. errorTip.setStyle("styleName", "errorTip");  
  39. }  
  40.   
  41. private function resetApp():void {  
  42. if (errorTip) {  
  43. ToolTipManager.destroyToolTip(errorTip);  
  44. errorTip = null;  
  45. }  
  46.   
  47. }  
  48. ]]></mx:Script>  
  49.   
  50. <mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>  
  51. <mx:TextInput id="phone" enter="validateEntry('phone',event)"/>  
  52. <mx:Label text="Press the enter key after entering text in each text input."/>  
  53.   
  54. <mx:Button id="b1" label="Reset" click="resetApp()"/>  
  55. </mx:Application>  

<?xml version="1.0"?>

<!-- tooltips/ErrorTipStyle.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">

<mx:Script><![CDATA[

import mx.controls.ToolTip;
import mx.managers.ToolTipManager;

private var errorTip:ToolTip;
private var myError:String;

private function validateEntry(type:String, event:Object):void {
if (errorTip) {
resetApp();
}

// NOTE: Validation logic would go here.

switch(type) {
case "ssn":
myError="Use SSN format (NNN-NN-NNNN)";
break;
case "phone":
myError="Use phone format (NNN-NNN-NNNN)";
break;
}

// Use the target's x and y positions to set position of error tip.
trace("event.currentTarget.width" + event.currentTarget.width);
trace("event.currentTarget.x" + event.currentTarget.x);
errorTip = ToolTipManager.createToolTip(
myError, event.currentTarget.x + event.currentTarget.width,
event.currentTarget.y) as ToolTip;
// Apply the errorTip class selector.
errorTip.setStyle("styleName", "errorTip");
}

private function resetApp():void {
if (errorTip) {
ToolTipManager.destroyToolTip(errorTip);
errorTip = null;
}

}
]]></mx:Script>

<mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>
<mx:TextInput id="phone" enter="validateEntry('phone',event)"/>
<mx:Label text="Press the enter key after entering text in each text input."/>

<mx:Button id="b1" label="Reset" click="resetApp()"/>
</mx:Application>



另外一种使用error tips的方法就是设置errorString属性。它会调用ToolTipManager创建一个ToolTip实例并且吧errorTip的风格运用到那个ToolTip中而不需要添加额外的代码。

Java代码

   1. <?xml version="1.0"?>  
   2.   
   3. <!-- tooltips/ErrorString.mxml -->  
   4.   
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">  
   6.   
   7. <mx:Script>  
   8. <![CDATA[  
   9. import mx.controls.ToolTip;  
  10. import mx.managers.ToolTipManager;  
  11.   
  12. private var errorTip:ToolTip;  
  13. private var myError:String;  
  14.   
  15. private function validateEntry(type:String, event:Object):void {  
  16. // NOTE: Validation logic would go here.  
  17. switch(type) {  
  18. case "ssn":  
  19. myError="Use SSN format";  
  20. break;  
  21. case "phone":  
  22. myError="Use phone format";  
  23. break;  
  24. }  
  25. event.currentTarget.errorString = myError;  
  26. }  
  27. ]]>  
  28. </mx:Script>  
  29.   
  30. <mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>  
  31. <mx:TextInput id="phone" enter="validateEntry('phone',event)"/>  
  32.   
  33. </mx:Application>  

<?xml version="1.0"?>

<!-- tooltips/ErrorString.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">

<mx:Script>
<![CDATA[
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;

private var errorTip:ToolTip;
private var myError:String;

private function validateEntry(type:String, event:Object):void {
// NOTE: Validation logic would go here.
switch(type) {
case "ssn":
myError="Use SSN format";
break;
case "phone":
myError="Use phone format";
break;
}
event.currentTarget.errorString = myError;
}
]]>
</mx:Script>

<mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>
<mx:TextInput id="phone" enter="validateEntry('phone',event)"/>

</mx:Application>




当调用createToolTip（）方法时你还可以通过指定errorTipBorderStyle的属性值来制定ToolTipManger所创建的error tip。

Java代码

   1. <?xml version="1.0"?>  
   2. <!-- tooltips/CreatingErrorTips.mxml -->  
   3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
   4.   
   5. <mx:Script>  
   6. <![CDATA[  
   7. import mx.managers.ToolTipManager;  
   8. import mx.controls.ToolTip;  
   9.   
  10. public var myTip:ToolTip;  
  11.   
  12. private function createBigTip(event:Event):void {  
  13. var myError:String = "These buttons let you save, exit, or continue with the currentoperation.";  
  14. // By setting the fourth argument to a non-null value,  
  15. // this ToolTip is created as an error tip.  
  16.   
  17. myTip = ToolTipManager.createToolTip(  
  18. myError,  
  19. event.currentTarget.x + event.currentTarget.width,  
  20. event.currentTarget.y,  
  21. "errorTipRight"  
  22. ) as ToolTip;  
  23. }  
  24.   
  25. private function destroyBigTip():void {  
  26. ToolTipManager.destroyToolTip(myTip);  
  27. }  
  28. ]]>  
  29. </mx:Script>  
  30.   
  31. <mx:Style>  
  32. Panel {  
  33. paddingLeft: 5;  
  34. paddingRight: 5;  
  35. paddingTop: 5;  
  36. paddingBottom: 5;  
  37. }  
  38. </mx:Style>  
  39.   
  40. <mx:Panel title="ToolTips" rollOver="createBigTip(event)" rollOut="destroyBigTip()">  
  41.   
  42. <mx:Button label="OK" toolTip="Save your changes and exit."/>  
  43. <mx:Button label="Apply" toolTip="Apply changes and continue."/>  
  44. <mx:Button label="Cancel" toolTip="Cancel and exit."/>  
  45.   
  46. </mx:Panel>  
  47. </mx:Application>  

<?xml version="1.0"?>
<!-- tooltips/CreatingErrorTips.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;

public var myTip:ToolTip;

private function createBigTip(event:Event):void {
var myError:String = "These buttons let you save, exit, or continue with the currentoperation.";
// By setting the fourth argument to a non-null value,
// this ToolTip is created as an error tip.

myTip = ToolTipManager.createToolTip(
myError,
event.currentTarget.x + event.currentTarget.width,
event.currentTarget.y,
"errorTipRight"
) as ToolTip;
}

private function destroyBigTip():void {
ToolTipManager.destroyToolTip(myTip);
}
]]>
</mx:Script>

<mx:Style>
Panel {
paddingLeft: 5;
paddingRight: 5;
paddingTop: 5;
paddingBottom: 5;
}
</mx:Style>

<mx:Panel title="ToolTips" rollOver="createBigTip(event)" rollOut="destroyBigTip()">

<mx:Button label="OK" toolTip="Save your changes and exit."/>
<mx:Button label="Apply" toolTip="Apply changes and continue."/>
<mx:Button label="Cancel" toolTip="Cancel and exit."/>

</mx:Panel>
</mx:Application>