Flex中ToolTip的使用

1、为ToolTip加入动画效果

 

//初始化设置
private function init():void{
ToolTip.maxWidth = 50; //设置最大宽度，文字超过宽度会自动换行
ToolTipManager.showEffect = eff; //设置ToolTip出现的动画效果
ToolTipManager.hideDelay = Infinity; //提示持续时间，Infinity表示一直不消失直到鼠标移走
ToolTipManager.showDelay = 0; //提示信息到鼠标的距离
}
//设置ToolTip的样式
mx|ToolTip{
fontSize:12;
backgroundColor:#000000;
color:#FFFFFF;
leading:12;
}
//ToolTip是mx包下面的类，所以只有mx包下面的特效才对其有效果
<s:Parallel id="eff">
<mx:Fade />
<mx:Zoom />
</s:Parallel>
<s:Button id="btn1" label="tooltip" toolTip="测试提示信息测试提示信息测试提示信息"/>

 

2、使用toolTipShown事件灵活控制提示信息

 

@font-face{
src:url("assets/font/ygy.ttf");
fontFamily:"ygy";
}
.errorTip{
fontFamily:ygy;
fontSize:12;
fontWeight:bold;
}
protected function btn_toolTipShownHandler(event:ToolTipEvent):void
{
var tt:ToolTip = event.toolTip as ToolTip;
tt.rotation = 15;
}
<s:Button id="btn" label="show toolTip" toolTipShown="btn_toolTipShownHandler(event)" errorString="测试提示信息测试提示信息测试提示信息"/>

 设置errorString会产生errorTip，这也是一种ToolTip提示信息，和ToolTip的外观区别是默认为红色背景并带有小三角。一般用法是在程序中判断出错条件，然后给组件的errorString赋值。如果要设置样式，CSS样式选择器的名称为.errorTip，注意前面有一个“.”，相当于重写该样式。

上例中监听toolTipShown事件得到errorString的引用，就可以对其操作，如位置、旋转度等，ToolTip也同样适用。另外， 如果要设置旋转度，需要指定字体或外部字体，否则文字无法正常显示。

3、适用ToolTipManager创建提示信息

可以用ToolTipManager的createToolTip和destroyToolTip方法来创建和移除提示信息。优点是可以控制提示信息的出现和消失的触发方式，例如单击才出现或者让提示信息一直跟随鼠标。

private var tt:IToolTip;
protected function showToolTip(event:MouseEvent):void
{
tt = ToolTipManager.createToolTip("测试提示信息",mouseX, mouseY);
}
protected function  hideToolTip(event:MouseEvent):void
{
ToolTipManager.destroyToolTip(tt);
tt = null;
}
<s:Button label="show toolTip" mouseOver=" showToolTip (event)" mouseOut="hideToolTip(event)"/>

createToolTip方法还有第四个参数errorTipBorderStyle，默认为空。如果给该参数赋值，创建的就是一个errorTip， 默认外观是红色背景带小三角。该参数有三个可选值：errorTipRight、errorTipAbove、errorTipBelow，用来设置小三 角尖角的方向。这是就要使用.errorTip来设置样式了。

4、实现自定义的ToolTip

自定义组件，该组件必须实现IToolTip接口，即实现set text()和get text()方法。经测试set text()方法体必须为空，否则外部赋值的文字不会显示。可以设置其大小，形状，背景，字体颜色等。

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="25"
  backgroundColor="red" borderStyle="solid" cornerRadius="5"   
  implements="mx.core.IToolTip">
<mx:Script>
<![CDATA[
[Bindable]
public var _text:String;
public function set text(value:String):void{
}
public function get text():String{
return _text;
}
]]>
</mx:Script>
<mx:Label text="{_text}" color="#000000" fontSize="15" textAlign="center"/>
</mx:Canvas>

toolTipCreate方法是创建tooltip前调用，toolTipShow方法是创建tooltip时调用。

需要显示tooltip的组件的toolTip属性不能为空，否则不会显示toolTip。

private function toolTipCreate(event:ToolTipEvent):void{
ToolTipManager.hideDelay = 10000;
var tt:ToolTipDemo = new ToolTipDemo();
tt._text = "自定义的ToolTip";
event.toolTip = tt;
}
private function toolTipShow(event:ToolTipEvent):void{
event.toolTip.x = mouseX;
event.toolTip.y = mouseY;
}
<mx:Button label="tooltip" toolTip=" " toolTipCreate="toolTipCreate(event)" toolTipShow="toolTipShow(event)" />