Tooltips in Flash using ActionScript 3.0

This post is for creating custom tooltips in flash using actionscript 3.

For Example if we want to show a tooltip over a movieclip (say box_mc) when we drag mouse over it and it should hide after the mouse leaves the movie clip.

Another important point is that the tooltip should change its x and y position as per the movement of the mouse when over the movieclip.

Lets begin.

Step 1. Create a box on the stage with the stage , select it and convert it to movieClip. Open its properties window and give it the instance name “box_mc”.

Step 2. Create a new layer and rename it “toolTip”. Create a new toolTip like movie clip as shown in the image and give it an instance name “tool”. Place a dynamic text box inside this “tool” movieclip so that we can show whatever toolTip we want to show at runtime.

Step 3. Create new layer and rename it as action. Put the following code on the first frame.

import flash.display.*;
import flash.events.MouseEvent;
import flash.ui.Mouse;

tool.tool_txt.text=”ToolTip is visible and its over the box!”;
stage.addEventListener(MouseEvent.MOUSE_MOVE,updateToolTipLocation);
box_mc.addEventListener(MouseEvent.MOUSE_OVER,showToolTip);
box_mc.addEventListener(MouseEvent.MOUSE_OUT,hideToolTip);
addChild(tool);
tool.visible=false;

function updateToolTipLocation(evt:MouseEvent):void {
tool.x=mouseX;
tool.y=mouseY;
}

function showToolTip(evt:MouseEvent):void {
tool.visible=true;
}

function hideToolTip(evt:MouseEvent):void {
tool.visible=false;
}