Flex 4 tooltip实例

<?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" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="application1_creationCompleteHandler(event)">
	
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:Rotate id="rotate" />
		<mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="2000"/> 		
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.events.ToolTipEvent;
						
			import spark.events.IndexChangeEvent;
			import mx.managers.ToolTipManager;
			
			import mx.core.UIComponent;
			
			import mx.managers.ToolTipManager;   
			import mx.controls.ToolTip;   
			public var myTip:ToolTip;   
			
						
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				ToolTipManager.showEffect= fadeIn;//rotate;//fadeIn; //显示tooltip的特效 
				ToolTipManager.hideEffect=fadeIn;// rotate;//fadeIn; //隐藏 tooltip的特效 
				
				showMyTooltip(one,"第一步开始");				
			}
			
			private function showMyTooltip(displayObject:UIComponent,tip:String):void{
				var tipX:Number = displayObject.x + displayObject.width + 10;
				var tipY:Number = displayObject.y;
				myTip =  ToolTipManager.createToolTip(tip,tipX,tipY) as ToolTip;
			}
			
			private function hideMyTooltip():void{
				if (myTip) {   
					ToolTipManager.destroyToolTip(myTip);   
					myTip = null; 
				}
			}
			
			protected function button_toolTipShowHandler(event:ToolTipEvent):void
			{
				event.toolTip.x=event.currentTarget.x + event.currentTarget.width + 10;
				event.toolTip.y=event.currentTarget.y + (event.currentTarget.height - event.toolTip.height) / 2;
			}
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				hideMyTooltip();
				showMyTooltip(two,"第二步开始");
			}
			
			protected function button2_clickHandler(event:MouseEvent):void
			{
				hideMyTooltip();
				showMyTooltip(three,"第三步开始");
			}
			
			protected function button3_clickHandler(event:MouseEvent):void
			{
				hideMyTooltip();
				showMyTooltip(four,"第四步开始");
			}
			
			protected function button4_clickHandler(event:MouseEvent):void
			{
				hideMyTooltip();
			}
			
		]]>
	</fx:Script>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		
		mx|ToolTip {
			borderStyle: "errorTipRight";
			borderColor:black;
			backgroundColor: black;
			backgroundAlpha: 0.8;
			cornerRadius: 5;
			color: white;
			fontSize: 16; 
			paddingBottom:5;
			paddingLeft:5;
			paddingRight:5;
			paddingTop:5;
			/* font-family: verdana;*/
			/* borderSkin: ClassReference("MyToolTip"); */
		}
		
	</fx:Style>
	
	<s:VGroup gap="100" >
		<s:Button id="testtooltip" label="测试tooltip" width="100" height="100"  toolTip="测试tooltip [[DYNAMIC]]2 - 解压缩后为 763,122 个字节 - 解压缩后为 763,122 个字节- 解压缩后为 763,122 个字节" toolTipShow="button_toolTipShowHandler(event)"/>
				
		<s:Button id="one" label="第一步" click="button1_clickHandler(event)" />
		<s:Button id="two" label="第二步" click="button2_clickHandler(event)" />
		<s:Button id="three" label="第三步" click="button3_clickHandler(event)" />
		<s:Button id="four" label="完成" click="button4_clickHandler(event)" />
	</s:VGroup>
	
	
</s:Application>