`

使用ToolTipManager自定义tooltip

    博客分类:
  • flex
阅读更多

直接贴代码,一看就懂。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="150" horizontalAlign="center" verticalAlign="middle">
	<mx:Style>
		global
		{
			font-size: 12;
			theme-color: haloSilver;			
		}
		Application
		{
			background-color: #dddddd;	
		}
		.errorTip
		{
			font-size: 12;
		}
		.testTip
		{
			font-size: 12;
			border-color: #ffffdd;
			color: #ff0000;
			font-weight: bold;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.managers.ToolTipManager;
			import mx.controls.ToolTip;
 
			private var _tip:ToolTip;
 
			private function _showTip($txt:String):void
			{
				trace(_tip);
				if(_tip == null)
				{
					var __point:Point = new Point(emailTI.x, emailTI.y);
					trace(__point)
					__point = emailTI.localToGlobal(__point);
					trace(__point);
					 _tip = ToolTipManager.createToolTip(	$txt,
					 										__point.x - emailTI.x, 
					 										__point.y - 40 ,
					 										'errorTipAbove') as ToolTip;
					 _tip.styleName = 'testTip';
				}
			}
 
			private function _destoryTip():void
			{
				if(_tip)
				{
					ToolTipManager.destroyToolTip(_tip);
				}
				_tip = null;
			}
		]]>
	</mx:Script>
	<mx:EmailValidator id="emailV" source="{emailTI}" property="text" trigger="{btn}" triggerEvent="click"/>
	<mx:Form horizontalCenter="0">
		<mx:FormItem label="电子邮件:" width="100%">
			<mx:TextInput id='emailTI' width="100%"/>
		</mx:FormItem>
		<mx:FormItem horizontalAlign="center" width="100%" direction="horizontal">
			<mx:Button id="btn" label="提交"/>
			<mx:Button id='btn2' label="显示Tip" click="_showTip('测试弹出Tip')"/>
			<mx:Button id='btn3' label="取消Tip" click="_destoryTip()"/>
		</mx:FormItem>		
	</mx:Form>
</mx:Application> 

 

范例效果:

 

tips:

1.createToolTip生成的ToolTip,必须用destoryToolTip来清除。如果在清楚之前再次调用createToolTip,则会生成重复的ToolTip。ToolTipManager有一个currentToolTip属性来保存当前显示的ToolTip,但这个属性对于使用createToolTip创建的ToolTip并没有效果

2.

createToolTip的第4个参数是指定箭头。如果为空,就不显示箭头。如果为下面三个字符串值中的一个,则会显示箭头:

  • errorTipAbove
  • errorTipRight
  • errotTipBelow

摘自:http://zengrong.net/post/455.htm

分享到:
评论

相关推荐

    winform 自定义tooltip

    在实际使用中,你可以通过实例化这个自定义Tooltip类,然后绑定到控件,设置相应的属性(如标题、内容、图标等),并调用显示方法,即可在你的应用程序中看到这个功能强大的自定义提示工具。如果在使用过程中遇到...

    37.(leaflet篇)leaflet叠加自定义tooltip展示.zip

    在本教程中,我们将深入探讨如何使用Leaflet库在地图上叠加自定义的tooltip,以增强用户交互体验。Leaflet是一个轻量级的JavaScript库,专门用于创建交互式地图,适用于各种Web应用。通过自定义tooltip,我们可以为...

    表格单元格自定义ToolTip组件

    1. 创建新的ToolTip类:继承自Adobe Flex的基础ToolTip类,或者使用IFeedback接口来创建自定义反馈组件。 2. 配置显示内容:根据需求,可以将内容动态生成,也可以预先设定,如使用数据绑定将单元格数据与ToolTip...

    纯CSS3实现自定义Tooltip边框.rar_纯CSS3实现自定义Tooltip边框

    一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的...

    自定义ToolTip

    在提供的压缩包文件中,"tips"可能包含了源代码、资源文件以及使用自定义ToolTip的示例。通过研究这些文件,开发者可以学习如何将此自定义实现整合到自己的MFC项目中。 总之,自定义ToolTip的实现是一个结合了MFC、...

    3D地球+自定义tooltip,自定义样式完美显示

    本项目聚焦于“3D地球”这一ECharts的特色功能,结合自定义的tooltip(提示框)来提供更个性化的数据展示效果。 首先,让我们深入了解ECharts 3D地球。ECharts 3D地球是ECharts的一个扩展模块,它允许开发者创建...

    Qt实现的自定义tip

    然而,为了使应用更具个性化或者满足特定需求,有时我们需要自定义tooltip的样式、形状和内容。 在“Qt实现的自定义tip”项目中,开发者可能面临以下几个关键步骤: 1. **创建自定义提示框类**:首先,我们需要...

    Flex 自定义ToolTip

    ### Flex自定义ToolTip详解 在Flex开发中,`ToolTip`是一种非常实用的界面元素,用于在用户悬停或聚焦某个控件时显示额外的信息。默认情况下,Flex提供了基本的`ToolTip`功能,但有时为了满足特定的设计需求或者...

    C# 使用GDI+绘制漂亮的ToolTip控件

    在自定义的`CustomToolTip`类中,我们需要重写`OnPaint`事件,利用GDI+提供的画刷、笔刷和几何形状等工具进行绘制。这包括: - 使用`Graphics`对象绘制背景,可以使用`SolidBrush`填充指定的颜色。 - 用`Pen`定义...

    Flash 自定义 ToolTip

    5. **图形绘制**:使用`Graphics`类绘制ToolTip的背景、边框和文本,可以自定义颜色、大小和形状。 6. **文本处理**:使用`TextField`类创建和格式化文本内容,包括字体、大小、颜色等。 7. **位置计算**:计算...

    Jquery实现自定义tooltip示例代码

    本文档提供了一个使用Jquery实现自定义tooltip的示例代码。tooltip,即“提示工具”,是一种常见的用户交互元素,它在用户将鼠标悬停在特定元素上时显示额外的信息。本文档所演示的是一种通过Jquery来创建和管理...

    c# ToolTip 几十种效果 集合了各种ToolTip 效果 很难得哦 源码

    【标题】中的“c# ToolTip 几十种效果”是指使用C#编程语言实现的ToolTip控件的各种显示效果集合。ToolTip控件是Windows Forms或WPF应用中常见的一种组件,它通常用于在鼠标悬停在某个控件上时显示额外的信息。这个...

    bettertip 一个可以自定义Tooltip的jQuery插件

    `BetterTip`是一个专为jQuery设计的插件,它允许开发者自定义Tooltip的样式、内容和行为,使其更加灵活,能够适应各种复杂的网页布局和交互需求。与jTip相比,`BetterTip`提供了更多的定制选项和更优秀的性能。 **1...

    angularJS实现的tooltip效果

    总结来说,使用AngularJS实现tooltip效果,不仅提供了强大的数据绑定和指令系统,还能实现高度自定义和动态交互。通过理解并实践上述步骤,你可以为你的应用增添更加丰富和个性化的tooltip功能。这个过程不仅展示了...

    echarts自作地图显示散点图 tooltip自定义内容

    要使用自定义地图,你需要准备地图的JSON数据,这些数据通常包含各个区域的边界信息。在我们的案例中,可能需要创建一个特定地区或城市的地图,以便展示更精确的地理位置信息。 2. **散点图与地图结合**: 散点图...

    easyui利用tooltip实现title功能

    在IT领域,特别是前端开发中,使用EasyUI框架来增强用户界面的功能性和美观性是一种常见的实践。EasyUI是一个基于jQuery的UI工具包,它提供了一系列的用户界面组件,如按钮、对话框、网格等,使得开发者能够快速地...

    DuiLib 自绘鼠标提示窗口 tooltip

    通常,系统默认的tooltip是简单文本形式,样式单一,而DuiLib的自绘tooltip则允许我们使用XML来定义提示窗口的布局、颜色、字体、边框等视觉元素,从而提供更丰富的交互体验。这在描述中提到,开发者参考了多位专家...

    Qt5自定义实例化的QToolTip

    在CustomToolTip类中,我们可以使用QVBoxLayout、QLabel、QPushButton等控件来构建类似QQ好友列表中的信息展示样式,包括好友头像、昵称、状态等信息。 接下来,我们需要覆盖QWidget的enterEvent()和leaveEvent()...

    46.(cesium篇)cesium实现信息提示tooltip.zip

    4. 使用Cesium的`DomUtils`或者自定义DOM元素,创建并显示包含查询结果的Tooltip。 5. 当鼠标移开时,隐藏Tooltip。 为了实现自定义的Tooltip样式,我们通常需要手动创建HTML元素并添加到页面中。可以使用CSS来调整...

    纯CSS3实现自定义Tooltip边框涂鸦风格的教程

    这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框...

Global site tag (gtag.js) - Google Analytics