ToolTips宽度
你可以通过更改maxWidth这个属性来改变ToolTip框的宽度。这个属性是静态的,所以当你设置的时候,你是设置所有的ToolTip框,你不能在ToolTip类的实力上设置次属性。
maxWidth这个属性制定了ToolTip框最大的显示宽度(pixels为单位的)。比如设置其为100个piexels
xmlns:mx="" creationComplete="init()">
import mx.controls.ToolTip;
public function init():void {
ToolTip.maxWidth = 100;
}
public function createNewButton(event:MouseEvent):void {
var myButton:Button = new Button();
myButton.label = "Create Another Button";
myButton.toolTip = "Click this new button to create another button.";
myButton.addEventListener(MouseEvent.CLICK, createNewButton);
addChild(myButton);
}
]]>
id="b1"
label="Create Another Button"
click="createNewButton(event);"
toolTip="Click this button to create a new one."
/>
Flex会把ToolTip的文字换行以确保文字显示宽度不会超过设置的宽度值。maxWidth的默认值为300. 假如这个值超过了application的宽度,那么Flex将会剪短ToolTip box中的显示文字。
事件的使用
在ToolTip的生命周期中会触发很多事件,这些事件都是ToolTipEvent类型的。
除了type和target两个属性外,ToolTipEvent对象涉及到了toolTip属性。利用这个属性,就可以通过text属性拿到ToolTip里面的文本内容值。
要在中使用ToolTipEvent类型的事件,你必须import mx.events.ToolTipEvent 类。以下是一个TOOL_TIP_SHOW事件的例子用来播放mp3文件的:
xmlns:mx="" initialize="init()">
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();
}
]]>
id="myLabel" toolTip="ToolTip" text="Mouse Over Me"/>
NavBar控件使用ToolTips
NavBar和TabBar子类在data provider中支持ToolTips。 Data provider 数组中可以包含ToolTip来为navigator 项指定toolTip。举个例子:
xmlns:mx="">
label="OK" toolTip="OK Button ToolTip"/>
label="Cancel" toolTip="Cancel Button ToolTip"/>
你也可以通过设置NavBar的toolTipField属性值来指向data provider中提供的toolTip。
xmlns:mx="">
toolTipField="myToolTip">
label="OK" myToolTip="OK Button TooTip"/>
label="Cancel" myToolTip="Cancel Button ToolTip"/>
ToolTip 管理器
使用ToolTipManager管理器类能够让你设置基本的ToolTip功能。比如显示延迟,以及控制是否显示ToolTip信息内容。这些全部包含在mx.managers包里面。当你要使用ToolTipManager的时候必须导入这个类。ToolTipManager这个类同时也包含了涉及当前ToolTip的currentToolTip属性。
ToolTips
你可以在程序中激活和停止使用ToolTips. 当你停止使用,在鼠标移到到组件上方的时候就不会用ToolTips的框显示出来,不管那个组件是否设置了toolTip这个属性值。
你可以使用enabled这个属性来激活或者停止使用ToolTips。这个属性为true时为激活状态,false为停止使用状态,默认是true.
xmlns:mx="">
import mx.managers.ToolTipManager;
private function toggleToolTips():void {
if (ToolTipManager.enabled) {
ToolTipManager.enabled = false;
} else {
ToolTipManager.enabled = true;
}
}
]]>
id="b1"
label="Toggle ToolTips"
width="150"
click="toggleToolTips();"
toolTip="Click me to enable/disable tooltips."
/>
延迟时间是来来衡量某一时间发生前所消耗的时间。比如,在用户移动鼠标指针到组件的上方,在ToolTip显示之前有一个简短的延迟。这就给那些不想看到ToolTip内容的用户足够的时间,在看到ToolTip信息之前把鼠标移开。
ToolTipManager 可以允许你设置这个ToolTip显示延迟的时间的长度,以及ToolTip在屏幕上显示的事件长度。你还可以设置ToolTips之间的延迟时间。
你可以在ActionScript的代码块中设置ToolTipManager的这些属性值:showDealy,hideDelay和scrubDelay。具体的功能描述请参考官方的develop guide。以下是一个例子利用Application k控制的初始化方法来设置ToolTip的初始值。
xmlns:mx="" creationComplete="initApp();">
import mx.managers.ToolTipManager;
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.
}
]]>
label="Click Me" toolTip="Click this Button to do something."/>
label="Click Me" toolTip="Click this Button to do something else."/>
label="Click Me" toolTip="Click this Button to do a third thing."/>
label="Click Me" toolTip="Click this Button to do the same thing."/>
ToolTip视觉效果
你可以使用自定义的视觉效果或者标准的Flex效果。你可以设置ToolTipManager的showEffect或者hideEffect属性值来定义当ToolTip显示或者隐藏是所触发的效果。
以下就是使用退出(Fade)的效果:
xmlns:mx="" width="600" height="600"
initialize="app_init();">
import mx.managers.ToolTipManager;
public function app_init():void {
ToolTipManager.showEffect = fadeIn;
}
]]>
id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/>
id="b1" label="Click Me" toolTip="This is a ToolTip that fades in."/>
例子当中的默认字体并没有退出的效果,你可以使用嵌入式(embeded)的字体来达到这个效果。
假如你为hideEffect设置了退出的这种效果,用户必须等到鼠标移动到这些组件的上方才能触发效果。如果用户的鼠标在ToolTip对象自动隐藏之前移动到不同的组件,hideToolTip事件就不会被触发。
ToolTip
你不仅可是使用ToolTips静态的显示文本信息的功能,还可以使用ToolTips动态的绑定组件中的内容来动态显示ToolTips信息。这样可以让你ToolTips成为用户界面的一部分。给用户给多的个性化的体验。
你可以使用{}绑定ToolTips的值到另外一个组件的文本内容。以下的例子就是插入TextInput控件的文本值到按钮控件的ToolTips值。
xmlns:mx="">
id="txtTo" width="300"/>
label="Send" toolTip="Send e-mail to {txtTo.text}"/>
另外一个方法就是获取ToolTips的toolTipShow事件处理来改变text属性值。以下就是一个通过myToolTipChanger方法来监听按钮控件的toolTipShow事件,然后在这个方法内修改了ToolTipManager.currentToolTip.text属性。这个属性值在运行前是未知的。
xmlns:mx="" initialize="initApp()">
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;
}
]]>
id="b1" label="Click Me" toolTip="Click the button."/>