AS3 Playground: Floating Tool Tip using currentTarget

01/02/2010 in RIA View Comments

Without a lot of explanation on the topic, the following package creates 4 squares dynamically, then uses event listeners to point to global methods that checks the currentTarget. Based on mouse over or mouse out a method is called to show the tool tip (created on the fly) and changes its X and Y based on your mouse location. Basically, it is a floating tooltip demo, showing you how helpful currentTarget is.

Download the source here

package com.riareviver{
 
	//Flash Class Imports
	import flash.display.MovieClip;
	import flash.events.*;
	import flash.text.TextField;
 
	public class toolTipMain extends MovieClip {
 
		var square01:MovieClip;
		var square02:MovieClip;
		var square03:MovieClip;
		var square04:MovieClip;
 
		var toolTipText:TextField;
 
		var squareXLoc:Number = 50;
		var squareYLoc:Number = 50;
		var squareDim:Number = 50;
 
		public function toolTipMain() {
			//Build Square 1 - Base
			square01 = new MovieClip();
			square01.graphics.beginFill(0xCCCCCC);
			square01.graphics.drawRect(squareXLoc, squareYLoc, squareDim, squareDim);
			square01.graphics.endFill();
			square01.width = squareDim;
			square01.height = squareDim;
			//Build Square 2
			square02 = new MovieClip();
			square02.graphics.beginFill(0x333333);
			square02.graphics.drawRect(squareXLoc + squareDim, squareYLoc, squareDim, squareDim);
			square02.graphics.endFill();
			square02.width = squareDim;
			square02.height = squareDim;
			//Build Square 3
			square03 = new MovieClip();
			square03.graphics.beginFill(0x999999);
			square03.graphics.drawRect(squareXLoc, squareYLoc + squareDim, squareDim, squareDim);
			square03.graphics.endFill();
			square03.width = squareDim;
			square03.height = squareDim;
			//Build Square 4
			square04 = new MovieClip();
			square04.graphics.beginFill(0x666666);
			square04.graphics.drawRect(squareXLoc + squareDim, squareYLoc + squareDim, squareDim, squareDim);
			square04.graphics.endFill();
			square04.width = squareDim;
			square04.height = squareDim;
			//Create ToolTip TEXTFIELD
			toolTipText = new TextField();
			toolTipText.width = 100;
			toolTipText.height = 15;
			toolTipText.backgroundColor = 0x64ADE9;
			toolTipText.background = true;
			toolTipText.textColor = 0x000000;
			toolTipText.visible = false;
 
			//Add children
			addChild(square01);
			addChild(square02);
			addChild(square03);
			addChild(square04);
			addChild(toolTipText);
			//Add Event Listeners
			square01.addEventListener(MouseEvent.MOUSE_OVER, checkMouseOver);
			square01.addEventListener(MouseEvent.MOUSE_OUT, checkMouseOut);
 
			square02.addEventListener(MouseEvent.MOUSE_OVER, checkMouseOver);
			square02.addEventListener(MouseEvent.MOUSE_OUT, checkMouseOut);
 
			square03.addEventListener(MouseEvent.MOUSE_OVER, checkMouseOver);
			square03.addEventListener(MouseEvent.MOUSE_OUT, checkMouseOut);
 
			square04.addEventListener(MouseEvent.MOUSE_OVER, checkMouseOver);
			square04.addEventListener(MouseEvent.MOUSE_OUT, checkMouseOut);
 
			//Universal method to check MOUSEOVER
			function checkMouseOver(e:MouseEvent):void {
				switch (e.currentTarget) {
					case square01 :
						stage.addEventListener(Event.ENTER_FRAME,toolTipOn);
						toolTipText.htmlText = "Square 1";
						break;
 
					case square02 :
						stage.addEventListener(Event.ENTER_FRAME,toolTipOn);
						toolTipText.htmlText = "Square 2";
						break;
 
					case square03 :
						stage.addEventListener(Event.ENTER_FRAME,toolTipOn);
						toolTipText.htmlText = "Square 3";
						break;
 
					case square04 :
						stage.addEventListener(Event.ENTER_FRAME,toolTipOn);
						toolTipText.htmlText = "Square 4";
						break;
				}
			}
			//Universal method to check MOUSEOUT
			function checkMouseOut(e:MouseEvent):void {
				switch (e.currentTarget) {
					case square01 :
						stage.removeEventListener(Event.ENTER_FRAME,toolTipOn);
						toolTipOff(null);
						break;
 
					case square02 :
						stage.removeEventListener(Event.ENTER_FRAME,toolTipOn);
						toolTipOff(null);
						break;
 
					case square03 :
						stage.removeEventListener(Event.ENTER_FRAME,toolTipOn);
						toolTipOff(null);
						break;
 
					case square04 :
						stage.removeEventListener(Event.ENTER_FRAME,toolTipOn);
						toolTipOff(null);
						break;
				}
			}
			//Tooltip ON
			function toolTipOn(e:Event):void {
				toolTipText.visible = true;
				toolTipText.x = mouseX + 10;
				toolTipText.y = mouseY - 10;
			}
			//Tooltip OFF
			function toolTipOff(e:Event):void {
				toolTipText.visible = false;
			}
 
		}
	}
}