Flex4 - 使用自定义ToolTip组件替换系统默认的ToolTip

2015-04-08 发布：hangge 阅读：1212

Flex中，如果给组件设置了toolTip属性值，则当鼠标移动到该组件上时，会自动出现tip提示，默认样式是黄色背景，且只能显示普通文本。

我们可以继承系统的ToolTip来实现自己的toolTip组件替换，并实现如下功能：

1，提示文本可以使用html文本（同时可以显示图片）

2，提示背景使用自定义皮肤（渐变，边框，半透明背景）

效果图如下：

--- 自定义提示组件 HtmlToolTip.as ---

package {
	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
{
	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);
		}
	}
}

--- 使用 ---

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   creationComplete="init(event)">	
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.managers.ToolTipManager;
			
			protected function init(event:FlexEvent):void
			{
				ToolTipManager.toolTipClass = HtmlToolTip;

				btn.toolTip ="<b>HtmlText</b><br/><img src='img.png'/>" +
					"<br/><br/><br/><br/><br/><br/><br/>Go to: <u>http://hangge.com</u>";
			}
			
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout paddingLeft="20" paddingTop="20"/>
	</s:layout>	
	<s:Button id="btn" label="自定义ToolTip组件"/>
</s:Application>