Flex中，如果给组件设置了toolTip属性值，则当鼠标移动到该组件上时，会自动出现tip提示，默认样式是黄色背景，且只能显示普通文本。
一、 自定义提示组件 HtmlToolTip.as
package controller
{
import mx.controls.ToolTip;
public class HtmlToolTip extends ToolTip
{
override protected function commitProperties():void{
super.commitProperties();
//转化为HTML文本
textField.htmlText = text;
}
// override protected function createChildren():void{
// //设置边框样式
// this.setStyle("borderSkin",HtmlToolBorder);
// this.setStyle("backgroundColors",[0x006699, 0xAEB4E6]);
// this.setStyle("borderColor",0x5965CC);
// super.createChildren();
// }
}
}
我没有对原有的边框样式做更改所以注释掉了一部分代码。如果需要更改还需要建一个类： HtmlToolBorder.as（ 提示组件皮肤）代码如下：
package controller
{
import flash.display.GradientType;
import mx.skins.halo.ToolTipBorder;
//ToolTipBorder是默认的边框样式
public class HtmlToolBorder extends ToolTipBorder{
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void{
var borderThickness:Number = this.getStyle("borderThickness");
var borderColor:Number = this.getStyle("borderColor");
var backgroundColors:Array = this.getStyle("backgroundColors");
var backgroundAlpha:Number = this.getStyle("backgroundAlpha");
super.updateDisplayList(unscaledWidth, unscaledHeight);
var w:Number = this.width;
var h:Number = this.height;
//清除原背景图形
this.graphics.clear();
//用渐变绘制背景
this.graphics.beginGradientFill(GradientType.LINEAR,backgroundColors,[1.0,0.5],[0,255]);
//绘制矩形
this.graphics.drawRect(0,0,w,h);
this.graphics.endFill();
this.alpha = backgroundAlpha;
//绘制边框
this.graphics.lineStyle(borderThickness,borderColor,1);
this.graphics.moveTo(0,0);
this.graphics.lineTo(w,0);
this.graphics.lineTo(w,h);
this.graphics.lineTo(0,h);
this.graphics.lineTo(0,0);
}
}
}
准备工作完成。
二、应用
首先定义一个function：
public static function get_tooltip_msg(n:Object,kind:int):String{
var Msg:String = "";
Msg = "Mote ID: "+n.Moteid_ID;
if((kind==15||(kind&8)))
Msg +=(SensingDataFormat.temperature(n)==‘N/A‘?‘‘:("<br/>Temp.: " +SensingDataFormat.temperature(n)));
if((kind==15||(kind&4)))
Msg +=(SensingDataFormat.humidity(n)==‘N/A‘?‘‘:("<br/>Hum.: " +SensingDataFormat.humidity(n)));
if((kind==15||(kind&2)))
Msg +=(SensingDataFormat.light(n)==‘N/A‘?‘‘:("<br/>Light: " +SensingDataFormat.light(n)));
if((kind==15||kind&1))
Msg +=((SensingDataFormat.co2(n)==‘N/A‘|| SensingDataFormat.type(n)==‘N/A‘)?‘‘:("<br/><font color=‘#ff0000‘ size=‘13‘ face=‘Microsoft YaHei‘>"+SensingDataFormat.type(n)+": " +SensingDataFormat.co2(n)+"</font>"));
return Msg;
}
这个方法是包装了数据格式，里面含有html代码。Flex的htmlText 自行百度 一大把，然后怎么在代码中应用呢，参见下面的代码：
protected function startShow_clickHandler(event:MouseEvent):void//show tooltips
{
for(var e:Object in moteIDMap){
var i:Image = e as Image;
var Msg:String = getMsgByMoteID(moteIDMap[i]);
if(moteToolTipMap[i]==null){
if((dataT.width-i.x)<100){
//moteToolTipMap[i] = ToolTipManager.createToolTip(Msg, i.x-10,i.y+30,null,i) as ToolTip;
moteToolTipMap[i] = new HtmlToolTip();
moteToolTipMap[i].x = i.x-10;
moteToolTipMap[i].y = i.y+30
}else{
//moteToolTipMap[i] = ToolTipManager.createToolTip(Msg, i.x+30,i.y,null,i) as ToolTip;
moteToolTipMap[i] = new HtmlToolTip();
moteToolTipMap[i].x = i.x+30;
moteToolTipMap[i].y = i.y
}
moteToolTipMap[i].text = Msg;
moteToolTipMap[i].setStyle("styleName", "errorTip");
moteToolTipMap[i].setStyle("fontSize", "12");
moteToolTipMap[i].setStyle("backgroundColors",[0x006699, 0xAEB4E6]);
moteToolTipMap[i].setStyle("borderColor",0x5965CC);
}else{
moteToolTipMap[i].move(i.x+i.width,i.y);
moteToolTipMap[i].text = Msg;
}
moteToolTipMap[i].depth=3;
dataT.addElement(moteToolTipMap[i]);
//moteMsgMap[i] = msg;
}
}
我们不用 ToolTipManager.createToolTip(Msg, i.x-10,i.y+30,null,i) as ToolTip; 这个方法来创建ToolTip 而是
moteToolTipMap[i] = new HtmlToolTip(); new 了一个我们继承的ToolTip对象，然后把对应的位置 x,y以及text 放进去
这样效果就出来了
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_686.html
原文：http://www.cnblogs.com/rvs-2016/p/8005137.html