[转]flex ToolTip专题

[url]http://nianshi.iteye.com/blog/743808[/url]

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>