自定义ToolTip组件

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

首先创建一个名为MyToolTip的组件：
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml "
implements="mx.core.IToolTip"
width="500" height="100%" backgroundColor="#ffd7ff" 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="498" text="{this._text}" color="#FFFFFF" fontSize="14" textAlign="left"/>
</mx:Canvas>


然后在程序中使用这个ToolTip，使用方法是在要显示ToolTip的组件里监听 toolTipCreate 事件，这个事件是在创建ToolTip前调用的，因此你可以在这里创建自定义的ToolTip，如果要对这个ToolTip的位置定位，可以监听他的toolTipShow事件，这个事件是在要显示toolTip时调用的


<?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定位
private function positionToolTip(e:ToolTipEvent):void
{
//将ToolTip定位在距离该组件上方（5，5）的位置
//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;

//将ToolTip定位在距离当前鼠标下方（10，20）的位置
e.toolTip.x = mouseX + 10;
e.toolTip.y = mouseY + 20;
}
]]>
</mx:Script>
<mx:Button id="btn" label="testToolTip" toolTip="test"
toolTipCreate ="createToolTip(event)" toolTipShow="positionToolTip(event)"/>
</mx:Application>