Flex中实现自定义ToolTip,也很简单,只要按如下三个步骤即可:
1.容器类实现mx.core.IToolTip接口,如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.core.IToolTip"
width="240"
alpha=".2"
borderThickness="2"
backgroundColor="#A4A4A4"
dropShadowEnabled="true"
borderColor="black"
borderStyle="solid"
roundedBottomCorners="true"
cornerRadius="10"
horizontalAlign="center"
height="80"
verticalAlign="middle">
<mx:Script><![CDATA[
[Bindable]
public var staName:String = "";
[Bindable]
public var percentage:String = "";
// Implement required methods of the IToolTip interface; 接口需要实现的方法 必须写!
public var _text:String;
[Bindable]
public function get text():String {
return _text;
}
public function set text(value:String):void {
}
]]></mx:Script>
<mx:HBox x="0" y="0" width="100%" height="100%" verticalAlign="top">
<mx:Label text="{staName}" width="30%" id="lbl_staName" textAlign="center"/>
<mx:Image width="30%" source="@Embed(source='../../../../Images/fltIcon.PNG')" horizontalAlign="right"/>
<mx:Label text="{percentage}" width="20%" id="lbl_percentage" textAlign="center"/>
</mx:HBox>
</mx:Panel>
2.要实现动态加载ToolTip,需要设置ToolTip载体控件的事件,例如:
var tmpDisplay:DisplayObject= this.getChildByName(s) as DisplayObject;
//绑定提示卡
tmpDisplay.toolTip=" "; //注意一定要设置此属性 否则无法显示
//可只用第一个ToolTipEvent.TOOL_TIP_CREATE
tmpDisplay.addEventListener(ToolTipEvent.TOOL_TIP_CREATE,function (event:ToolTipEvent):void{createCustomTip('邯郸','80%',event)});
tmpDisplay.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,function (event:ToolTipEvent):void{positionTip(event)});
tmpDisplay.addEventListener(ToolTipEvent.TOOL_TIP_END,function (event:ToolTipEvent):void{onToolTipEnd(event)});
3.完成ToolTip创建、显示、销毁的三个方法:
//创建提示卡
private function createCustomTip(staName:String, percentage:String, event:ToolTipEvent):void {
stt.styleName="StationToolTipStyle1";
stt.staName = staName;
stt.percentage=percentage;
event.toolTip = stt;
}
//确定位置 此方法完成显示坐标的设置,如果设置不正确 可能会引发频繁调用
private function positionTip(event:ToolTipEvent):void{
//由于诸多点 都放在了Canvas之上 所以要受Canvas坐标影响 使用localToGlobal方法做转换
var objSource:DisplayObject=event.currentTarget as DisplayObject;
var pt:Point = new Point();
pt.x = 0;
pt.y = 0;
pt = objSource.localToGlobal(pt); //受Canvas坐标影响 使用localToGlobal方法做转换
event.toolTip.x=pt.x + objSource.width+ 10;
event.toolTip.y=pt.y-objSource.height/2;
/*如果没有Canvas(也就是父容器)影响的话 可以直接设置坐标
event.toolTip.x=event.currentTarget .x + event.currentTarget .width+ 10;
event.toolTip.y=event.currentTarget .y-event.currentTarget .height/2;
*/
}
//隐藏后销毁
private function onToolTipEnd(event:ToolTipEvent):void
{
var ttip:StationToolTip = event.toolTip as StationToolTip;
ToolTipManager.destroyToolTip(ttip);
ttip = null;
}
用此三招,建立动态绑定的自定义ToolTip,无往而不胜!
来源:http://blog.csdn.net/ozzy_003/article/details/6058880
可参考:UIComponent研究
示例2(自己例子):
效果图:
if(label !=null && label != ""){ line.toolTip=" "; line.addEventListener(ToolTipEvent.TOOL_TIP_CREATE, createCustomTip); }
private function createCustomTip(event:ToolTipEvent):void { var line:SequenceLine=event.target as SequenceLine; var tip:SuperToolTip=new SuperToolTip(); tip.title="服务基本信息"; if (line.data != null) { tip.bodyData=line.data; } event.toolTip=tip; }
SuperToolTip.mxml:
<?xml version="1.0"?> <!-- tooltips/ToolTipComponents/PanelToolTip.mxml (tos.mxml)--> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.core.IToolTip" width="350" height="150" horizontalScrollPolicy="off" verticalScrollPolicy="off" styleName="viewSuperToolTip"> <mx:Style> .viewSuperToolTip{ borderColor: #DDDDDD; borderAlpha: 1; borderThicknessLeft: 1; borderThicknessTop: 1; borderThicknessBottom: 1; borderThicknessRight: 1; roundedBottomCorners: true; headerColors: #FFFFCF, #FFFFCF; footerColors: #FFFFCF, #FFFFCF; backgroundColor: #FFFFCF; dropShadowEnabled: false; shadowDistance: 0; shadowDirection: center; dropShadowColor: #96baeb; cornerRadius: 5; titleStyleName: "panelTitle"; headerHeight: 22; } .panelTitle { fontSize: 12; fontWeight: bold; color:#2c5c9e; } </mx:Style> <mx:Script> <![CDATA[ [Bindable] private var _bodyData:Object=new Object(); public var _text:String; public function get text():String { return _text; } public function set text(value:String):void { this._text=value; } public function get bodyData():Object { return _bodyData; } public function set bodyData(bodyData:Object):void { this._bodyData=bodyData; } ]]> </mx:Script> <mx:Label width="100%" height="5"/> <mx:Label text="{'英文名:'+_bodyData.serviceNameEn}" width="100%" fontSize="12"/> <mx:Label text="{'中文名:'+bodyData.serviceNameCN}" width="100%" fontSize="12"/> <mx:Label text="{'提供方:'+bodyData.providerAppName} ({bodyData.providerAppCode})" width="100%" fontSize="12"/> <mx:Label text="{'消费方:'+bodyData.consumerAppName} ({bodyData.consumerAppCode})" width="100%" fontSize="12"/> </mx:Panel>
..
相关推荐
一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框...用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小
Flex 自定义ToolTip源代码,可以运行的源代码
很好用的自定义tooltip,带有标题,内容,图标和关闭按钮,亲测可用,如有不懂可联系我。
表格单元格自定义ToolTip组件,适用所有Flex组件的自定义提示
下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/120502129
鼠标滑过标签控件时,显示一个自定义形状的消息提示框,简陋的很,姑且抛砖引玉吧
ECHARTS3D 地球,解决TOOLTOP不显示问题.使用CSS自定义tooltip样式,完美显示。
自定义实现了仿Windows气泡,可以显示图标和多行文字,配有使用方法
主要介绍了Jquery实现自定义tooltip的方法,需要的朋友可以参考下
ystep流程,扩展驳回功能,BootstrapTooltip动态加载html
用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。 下面我们来分享一下实现的方法,主要由HTML代码和CSS代码组成。 HTML代码: XML/HTML Code复制内容到剪贴板 <div>CSS3简单实现涂鸦...
angularJS实现的tooltip效果,亲测有效........................
bettertip 一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活
VB多风格自定义的ToolTip气泡信息提示,VB多风格自定义的ToolTip气泡信息提示
echarts自作地图高亮显示散点图 tooltip自定义内容。
FLEX自定义的TOOLTIP,拥有更加绚丽的特效!
介绍C#使用GDI+重绘工具提示控件ToolTip,实现ToolTip自定义图标、大图标、小图标和透明显示,并可以轻松的更换ToolTip背景和边框颜色
开源库DuiLib 自绘鼠标提示窗口 tooltip 由于Duilib的tooltip使用的是系统默认的实现,这里使用参考各位大神博客后,实现利用xml自绘提示窗口界面