flex 中echarts tooltip 事件create事件为什么没有响应

Flex中ToolTip的使用
1、为ToolTip加入动画效果
//初始化设置
private function init():void{
ToolTip.maxWidth = 50; //设置最大宽度,文字超过宽度会自动换行
ToolTipManager.showEffect = //设置ToolTip出现的动画效果
ToolTipManager.hideDelay = I
//提示持续时间,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:
fontSize:12;
fontWeight:
protected function
btn_toolTipShownHandler(event:ToolTipEvent):void
var tt:ToolTip = event.toolTip as ToolT
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:IToolT
protected function showToolTip(event:MouseEvent):void
tt = ToolTipManager.createToolTip("测试提示信息",mouseX,
protected function& hideToolTip(event:MouseEvent):void
ToolTipManager.destroyToolTip(tt);
&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="/2006/mxml" width="100"
height="25"
& backgroundColor="red" borderStyle="solid"
cornerRadius="5" &&
implements="mx.core.IToolTip"&
&mx:Script&
[Bindable]
public var _text:S
public function set text(value:String):void{
public function get text():String{
&/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 =
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)" /&
已投稿到:
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。在FLEX中创建可交互的TOOLTIP. - 『小小菜鸟』 - 博客园
随笔 - 726
评论 - 624
FLEX中的TOOLTIP都是静态的,如果想创建一个TOOLTIP上面有按钮,有超级连接,怎么做呢?
MXML文件:
&?xml&version="1.0"&encoding="utf-8"?&
&mx:Application&xmlns:mx="/2006/mxml"&initialize="init()"&
&&&&&&&&&&&&&&&&viewSourceURL="srcview/index.html"&width="600"&height="300"&
&&&&&mx:DataGrid&id="dg"&dataProvider="{tmpArray}"&width="550"
&&&&&&&&&&&&&&&&&mouseOut="dgMouseOut(event)"&mouseOver="dgMouseOver(event)"&mouseMove="dgMouseMove(event)"&
&&&&&&&&&mx:columns&
&&&&&&&&&&&&&mx:Array&
&&&&&&&&&&&&&&&&&mx:DataGridColumn&headerText="Label"&dataField="label"&showDataTips="true"&/&
&&&&&&&&&&&&&&&&&mx:DataGridColumn&headerText="Data"&dataField="data"&/&
&&&&&&&&&&&&&/mx:Array&
&&&&&&&&&/mx:columns&
&&&&&/mx:DataGrid&
&&&&&mx:Style&
&&&&&&&&.menuToolTip&{
&&&&&&&&&&&&&&&backgroundAlpha:&1;
&&&&&&&&&&&&&&&backgroundColor:&#
&&&&&&&&&&&&&&&useRollOver:&
&&&&&&&&&&&&&&&borderStyle:&
&&&&&&&&&&&&&&&borderThickness:&0;
&&&&&&&&&&&&&&&borderColor:�
&&&&&&&&&&&&&&&selectionColor:&#7
&&&&&&&&&&&&&&&dropShadowEnabled:&
&&&&&&&&&&&&&&&cornerRadius:&5;
&&&&&&&&&&&&&&&paddingLeft:&3;&paddingRight:&3;&paddingTop:&3;&paddingBottom:&3;
&&&&&&&&&&&&&&&
&&&&&&&&&&&&}
&&&&&/mx:Style&
&&&&&mx:Script&
&&&&&&&&&![CDATA[
&&&&&&&&&&&&import&mx.automation.delegates.controls.ListBaseContentHolderAutomationI
&&&&&&&&&&&&import&mx.controls.listClasses.ListB
&&&&&&&&&&&&import&renderers.MenuToolTipR
&&&&&&&&&&&&import&mx.controls.dataGridClasses.DataGridItemR
&&&&&&&&&&&&
&&&&&&&&&&&&import&mx.managers.ToolTipM
&&&&&&&&&&&&import&mx.controls.M
&&&&&&&&&&&&import&mx.events.MenuE
&&&&&&&&&&&&import&flash.geom.P
&&&&&&&&&&&&
&&&&&&&&&&&&[Bindable]&private&var&dgMouseX:Number&=&0;
&&&&&&&&&&&&[Bindable]&private&var&dgMouseY:Number&=&0;
&&&&&&&&&&&&
&&&&&&&&&&&&private&var&toolTipMenu:M
&&&&&&&&&&&&private&var&toolTipTimer:T
&&&&&&&&&&&&
&&&&&&&&&&&&[Bindable]
&&&&&&&&&&&&&&&public&var&tmpArray:Array&=&[{label:&&&b&mary&/b&&had&a&little&lamb&,&data:&55,&link:&/blog&},&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{label:&&All&the&kings&men,&and&all&the&kings&horses&,&data:&56,&link:&/blog&},&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{label:&&baa&baa&black&sheep,&have&you&any&wool&,&data:&57,&link:&/blog&},&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{label:&&jack&and&jill&went&up&the&hill&,&data:&58,&link:&/blog&},&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{label:&&little&miss&muffet,&sat&on&a&tuffet,&eating&her&curds&and&whey&,&data:&59,&link:&/blog&}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&];
&&&&&&&&&&&&
&&&&&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&&&&&
&&&&&&&&&&&&public&function&init():void
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&ToolTipManager.enabled&=&
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&&&&&
&&&&&&&&&&&&private&function&createMenu(data:Object):void&
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&toolTipTimer.stop();
&&&&&&&&&&&&&&&&var&menuData:Array&=&[{label:&data.label,&link:&data.link}];
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&toolTipMenu&=&Menu.createMenu(this,&menuData,&false);
&&&&&&&&&&&&&&&&toolTipMenu.labelField="label";
&&&&&&&&&&&&&&&&toolTipMenu.width&=&250;
&&&&&&&&&&&&&&&&toolTipMenu.setStyle("fontSize",&10);
&&&&&&&&&&&&&&&&toolTipMenu.setStyle("themeColor",&0xFF9900);
&&&&&&&&&&&&&&&&toolTipMenu.itemRenderer&=&new&ClassFactory(renderers.MenuToolTipRenderer);
&&&&&&&&&&&&&&&&toolTipMenu.data&=&
&&&&&&&&&&&&&&&&toolTipMenu.selectable&=&
&&&&&&&&&&&&&&&&toolTipMenu.setStyle("styleName",&"menuToolTip");
&&&&&&&&&&&&&&&&toolTipMenu.setStyle("openDuration",&0);
&&&&&&&&&&&&&&&&//toolTipMenu.setStyle("selectionEasingFunction",&myEasingFunction);
&&&&&&&&&&&&&&&&toolTipMenu.addEventListener(MouseEvent.ROLL_OUT,&hideToolTip);
&&&&&&&&&&&&&&&&toolTipMenu.addEventListener("buttonClicked",&catchButtonClick);
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&var&pt1:Point&=&new&Point(this.dgMouseX,&this.dgMouseY);
&&&&&&&&&&&&&&&&pt1&=&dg.localToGlobal(pt1);
&&&&&&&&&&&&&&&&//offset&this&for&now&to&fix&slight&bug&where&immediate&mouseover&of&tooltip&causes&it&to&hide
&&&&&&&&&&&&&&&&toolTipMenu.show(pt1.x+10,&pt1.y+0);
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&&&&&
&&&&&&&&&&&&private&function&hideToolTip(event:MouseEvent):void
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&//trace("MENU&---&"&+&event.relatedObject&+&"&-&"&+&event.target&+&"&-&"&+&event.currentTarget);
&&&&&&&&&&&&&&&&toolTipMenu.hide();
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&&&&&
&&&&&&&&&&&&private&function&dgMouseMove(event:MouseEvent):void
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&this.dgMouseX&=&dg.mouseX;
&&&&&&&&&&&&&&&&this.dgMouseY&=&dg.mouseY;
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&&&&&
&&&&&&&&&&&&private&function&dgMouseOver(event:MouseEvent):void
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&this.dgMouseX&=&dg.mouseX;
&&&&&&&&&&&&&&&&this.dgMouseY&=&dg.mouseY;
&&&&&&&&&&&&&&&&//trace("DATAGRID&OVER&---&"&+&event.target&+&"&-&"&+&event.currentTarget&+&"&-&"&+&event.relatedObject);
&&&&&&&&&&&&&&&&if(event.target&is&DataGridItemRenderer)
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&if(toolTipMenu&!=&null)
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&if(toolTipMenu.visible&&&&toolTipMenu.data&==&event.target.data)&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&if(!DataGridItemRenderer(event.target).styleName.showDataTips)
&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&toolTipTimer&=&new&Timer(1000,&0);
&&&&&&&&&&&&&&&&&&&&toolTipTimer.addEventListener(TimerEvent.TIMER,&function():void&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&createMenu(event.target.data);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&);
&&&&&&&&&&&&&&&&&&&&toolTipTimer.start();
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&&&&&
&&&&&&&&&&&&private&function&dgMouseOut(event:MouseEvent):void
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&if(toolTipTimer)&toolTipTimer.stop();
&&&&&&&&&&&&&&&&//trace("DATAGRID&OUT&---&"&+&event.target&+&"&-&"&+&event.currentTarget&+&"&-&"&+&event.relatedObject);
&&&&&&&&&&&&&&&&if(event.relatedObject&is&mx.controls.listClasses.ListBaseContentHolder&||&event.relatedObject&is&MenuToolTipRenderer)
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&if(event.target&is&DataGridItemRenderer)
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&if(event.relatedObject&is&Menu&||&!event.relatedObject&is&MenuToolTipRenderer)&
&&&&&&&&&&&&&&&&&&&&if(toolTipMenu&!=&null)&toolTipMenu.hide();
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&&&&&
&&&&&&&&&&&&private&function&catchButtonClick(e:Event):void&
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&mx.controls.Alert.show(e.target.data.label&+&"&was&clicked&to&take&you&to&"&+&e.target.data.link);
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&]]&
&&&&&/mx:Script&
&/mx:Application&
MenuToolTipRenderer.as文件:
package&renderers
&&&&import&flash.events.E
&&&&import&flash.events.MouseE
&&&&import&flash.text.TextFieldAutoS
&&&&import&mx.controls.A
&&&&import&mx.controls.LinkB
&&&&import&mx.controls.M
&&&&import&mx.controls.listClasses.IListItemR
&&&&import&mx.controls.menuClasses.IMenuItemR
&&&&import&mx.core.EdgeM
&&&&import&mx.core.IDataR
&&&&import&mx.core.UIC
&&&&import&mx.core.UITextF
&&&&import&mx.events.FlexE
&&&&public&class&MenuToolTipRenderer&extends&UIComponent&implements&IMenuItemRenderer,&IDataRenderer,&IListItemRenderer
&&&&&&&&private&var&textField:UITextF
&&&&&&&&private&var&clickText:LinkB
&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&public&function&MenuToolTipRenderer()
&&&&&&&&&&&&super();
&&&&&&&&&&&&
&&&&&&&&&&&&this.addEventListener(FlexEvent.DATA_CHANGE,&renderComponent);
&&&&&&&&&&&&this.setStyle("cornerRadius",&5);
&&&&&&&&&&&&
&&&&&&&&&&&&this.maxWidth&=&250;
&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&//&Internal&variable&for&the&property&value.
&&&&&&&&private&var&_menu:M
&&&&&&&&public&function&get&menu():Menu
&&&&&&&&&&&&return&_
&&&&&&&&public&function&set&menu(value:Menu):void
&&&&&&&&&&&&_menu&=&
&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&private&var&_data:O
&&&&&&&&[Bindable("dataChange")]
&&&&&&&&public&function&get&data():Object&{
&&&&&&&&&&&&return&_
&&&&&&&&public&function&set&data(value:Object):void&{
&&&&&&&&&&&&_data&=&
&&&&&&&&&&&&dispatchEvent(new&FlexEvent(FlexEvent.DATA_CHANGE));
&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&private&function&get&borderMetrics():EdgeMetrics
&&&&&&&&&&&&return&EdgeMetrics.EMPTY;
&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&private&function&renderComponent(event:FlexEvent):void
&&&&&&&&&&&&if(_data&!=&null&&&&_data&!=&"null")
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&textField.htmlText&=&data.
&&&&&&&&&&&&&&&&invalidateProperties();
&&&&&&&&&&&&&&&&invalidateSize();
&&&&&&&&&&&&&&&&invalidateDisplayList();
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}
&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&private&function&buttonClick(event:Event):void
&&&&&&&&&&&&mx.controls.Alert.show("button&click");
&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&override&protected&function&createChildren():void
&&&&&&&&&&&&super.createChildren();
&&&&&&&&&&&&//&Create&the&TextField&that&displays&the&tooltip&text.
&&&&&&&&&&&&if&(!textField)
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&textField&=&new&UITextField();
&&&&&&&&&&&&&&&&textField.autoSize&=&TextFieldAutoSize.LEFT;
&&&&&&&&&&&&&&&&textField.mouseEnabled&=&
&&&&&&&&&&&&&&&&textField.multiline&=&
&&&&&&&&&&&&&&&&textField.selectable&=&
&&&&&&&&&&&&&&&&textField.wordWrap&=&
&&&&&&&&&&&&&&&&textField.styleName&=&
&&&&&&&&&&&&&&&&addChild(textField);&&&&
&&&&&&&&&&&&}
&&&&&&&&//-------------------------------------------------------------------------
&&&&&&&&override&protected&function&measure():void
&&&&&&&&&&&&super.measure();
&&&&&&&&&&&&var&bm:EdgeMetrics&=&borderM
&&&&&&&&&&&&var&leftInset:Number&=&bm.left&+&getStyle("paddingLeft");
&&&&&&&&&&&&var&topInset:Number&=&bm.top&+&getStyle("paddingTop");
&&&&&&&&&&&&var&rightInset:Number&=&bm.right&+&getStyle("paddingRight");
&&&&&&&&&&&&var&bottomInset:Number&=&bm.bottom&+&getStyle("paddingBottom");
&&&&&&&&&&&&var&widthSlop:Number&=&leftInset&+&rightI
&&&&&&&&&&&&var&heightSlop:Number&=&topInset&+&bottomI
&&&&&&&&&&&&textField.wordWrap&=&
&&&&&&&&&&&&if&(textField.textWidth&+&widthSlop&&&this.maxWidth)
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&textField.width&=&this.maxWidth&-&widthS
&&&&&&&&&&&&&&&&textField.wordWrap&=&
&&&&&&&&&&&&}
&&&&&&&&&&&&measuredWidth&=&textField.width&+&widthS
&&&&&&&&&&&&measuredHeight&=&textField.height&+&heightS
&&&&&&&&&&&&
&&&&&&&&&&&&this.parent.parent.height&=&this.parent.height&=&this.height&=&measuredHeight&+&25;
&&&&&&&&&&&&this.parent.parent.width&=&this.parent.width&=&this.width&=&measuredW
&&&&&&&&&&&&
&&&&&&&&&&&&createAdditionalContent(measuredWidth,&measuredHeight);
&&&&&&&&private&function&createAdditionalContent(measuredWidth:Number,&measuredHeight:Number):void
&&&&&&&&&&&&clickText&=&new&LinkButton();
&&&&&&&&&&&&clickText.label&=&"More&Info";
&&&&&&&&&&&&clickText.width&=&70;
&&&&&&&&&&&&clickText.height&=&18;
&&&&&&&&&&&&clickText.setStyle("fontSize",&9);
&&&&&&&&&&&&clickText.setStyle("color",&"blue");
&&&&&&&&&&&&clickText.buttonMode&=&
&&&&&&&&&&&&clickText.visible&=&
&&&&&&&&&&&&clickText.y&=&measuredH
&&&&&&&&&&&&clickText.x&=&measuredWidth&-&clickText.width&-&8;
&&&&&&&&&&&&
&&&&&&&&&&&&clickText.addEventListener(MouseEvent.CLICK,&dispatchClick);
&&&&&&&&&&&&addChild(clickText);
&&&&&&&&private&function&dispatchClick(e:Event):void
&&&&&&&&&&&&this.dispatchEvent(new&Event("buttonClicked",&true))[转载]Flex中ToolTip的使用
good1、为ToolTip加入动画效果
//初始化设置
private function init():void{
ToolTip.maxWidth = 50; //设置最大宽度,文字超过宽度会自动换行
ToolTipManager.showEffect = //设置ToolTip出现的动画效果
ToolTipManager.hideDelay = I
//提示持续时间,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:
fontSize:12;
fontWeight:
protected function
btn_toolTipShownHandler(event:ToolTipEvent):void
var tt:ToolTip = event.toolTip as ToolT
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:IToolT
protected function showToolTip(event:MouseEvent):void
tt = ToolTipManager.createToolTip("测试提示信息",mouseX,
protected function& hideToolTip(event:MouseEvent):void
ToolTipManager.destroyToolTip(tt);
&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="/2006/mxml" width="100"
height="25"
& backgroundColor="red" borderStyle="solid"
cornerRadius="5" &&
implements="mx.core.IToolTip"&
&mx:Script&
[Bindable]
public var _text:S
public function set text(value:String):void{
public function get text():String{
&/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 =
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)" /&
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。4074人阅读
Flex4(44)
1.Application标签中有三个事件
initialize,creationComplete,applicationComplete(只用Application才有的事件)
creationComplete和applicationComplete有什么区别:
creationComplete先执行完
creationComplete是 Application实例完成后就执行的函数
applicationComplete是整个Application所有的东西都实例完成后再执行的函数
Flex程序启动事件的顺序initialize、creationComplete、applicationComplete
2.当容器中有子容器或控件时,都有initialize和creationComplete事件.
则先执行子容器的事件再执行父容器事件.这个和flex的冒泡机制有关.
测试输出顺序如下:
子容器的initialize事件
父容器的initialize事件
子容器的creation事件
父容器的creation事件
父容器中的applicationComplete事件
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:183724次
积分:1973
积分:1973
排名:第14225名
转载:72篇
评论:21条
(3)(2)(2)(1)(5)(11)(10)(19)(19)(9)

我要回帖

更多关于 flex tooltip 的文章

 

随机推荐