自定义ToolTip

本贴转自：http://blog.sina.com.cn/s/blog_5ff273af0100de1j.html

flex自带的ToolTip是一个矩形框加上一个文本框，可以通过修改style设置他的大小，背景，字体颜色等，但不能改变其形状，如果我想要一个五 角星之类的ToolTip就得自定义了。下面简单介绍一下自定义ToolTiP的方法，其实做法跟自定义其他组件一样，因为ToolTip本身就是一个组 件，只是他需要实现IToolTip接口

 

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

然后我们在程序中使用这个ToolTip，使用方法是在要显示ToolTip的组件里监听toolTipCreate事件，这个事件是在创建 ToolTip前调用的，因此你可以在这里创建你自定义的ToolTip，如果要对这个ToolTip的位置定位，可以监听他的toolTipShow事 件，这个事件是在要显示toolTip时调用的，呵呵，就可以在这里定位了。发现Flex的事件机制无处不在啊！

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"> <mx:Script> <!--[CDATA[ import mx.events.ToolTipEvent; private function createToolTip(e:ToolTipEvent):void { var tip:MyToolTip = new MyToolTip(); e.toolTip = tip; } //将ToolTip定位在距离该组件上方（5，5）的位置 private function positionToolTip(e:ToolTipEvent):void { var pt:Point = new Point(); pt.x = 0; pt.y = 0; pt = btn.localToGlobal(pt); e.toolTip.x = pt.x + 5; e.toolTip.y = pt.y - 35; } ]]--> </mx:Script> <mx:Button id="btn" label="testToolTip" toolTip="test" toolTipCreate="createToolTip(event)" toolTipShow="positionToolTip(event)"/> </mx:Application>