Manually creating and destroying tooltips

Rather than use the ‘toolTip’ property of a component, we’re going to use the ToolTipManager to create and remove tooltips. This method allows us to position tooltips anywhere on the stage, apply animations, and provide dynamic text.

private var myToolTip:ToolTip;
 
private function showToolTip(evt:MouseEvent, text:String):void
{
   // Create a simple tooltip that appears at the mouse x and y position
   myToolTip = ToolTipManager.createToolTip("Tooltip", evt.x, evt.y) as ToolTip;
}
 
// Remove the tooltip
private function killToolTip():void
{
   ToolTipManager.destroyToolTip(myToolTip);
}

To use the above functions, we need to assign them to a components mouseOver and mouseOut events:

<mx:Button label="Button" mouseOver="showToolTip(event)" mouseOut="killToolTip()"/>

Adding arrows by using Flex’s “error tips”

When creating tooltips by using “ToolTipManager.createToolTip(…)” you can pass in a 4th parameter as a string that specifices which error tip to use. The available options are:

• “errorTipAbove”
• “errorTipBelow”
• “errorTipRight”

Error tips default to a red background color and black text but you can easily change this through styles:

myToolTip.setStyle("borderColor", "#ff6600");
myToolTip.setStyle("color", "white");

Positioning tooltips above, below, and to the right

Another pitfall when creating tooltips manually is specifying the position of the tooltip. The “createToolTip” method requires the x and y coordinates passed in are “global” coordinates, rather than the local x and y coordinates within a container. This makes it a little more tricky to place a tooltip directly below or to the right of a component. The easiest way to fix this is using the method “contentToGlobal(point)”.

var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
pt = evt.currentTarget.parent.contentToGlobal(pt);

Putting it all together (right click for source):