Flex中ToolTip的运用

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()方法。经测试settext()方法体必须为空，否则外部赋值的文字不会显示。可以设置其大小，形状，背景，字体颜色等。

<?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)" />

?

查看更多 下一篇