Arrow ToolTips in Flex with Customized Color and Position
Flex doesn’t make it easy to customize your ToolTip’s positioning or look. You can write your own ToolTip style and draw your own borders or you can use the “error tips” that already have arrows built in.
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);
