Comtaste Consulting | Enterprise RIA consulting and development

When you want to assign a tooltip to a UIComponent, you simply set the variable "tooltip" to a custom String. You don't have many chances to customize it, except from the string itself. On the contrary you can use the ToolTipManager to customize tooltips for your entire application; this class has properties such as hideDelay/showDelay, hideEffect/showEffect and toolTipClass, with which you can change the UI for all your tooltips; the ToolTipManager lets you create and destroy tooltips progamatically also with the two methods createToolTip and destroyToolTip.
In this post I want to show you how to customize a tooltip in a specified view only, without interfere with the rest of your application. You can use two strategies:
- manage the popup by yourself, creating/destroying it and let it interact with the mouse events
- use the tooltip manager
We are going to explore the latter.
The UIComponent class dispatches some tooltip related events:

- toolTipCreate Dispatched by the component when it is time to create a ToolTip. UIComponent
- toolTipEnd Dispatched by the component when its ToolTip has been hidden and will be discarded soon. UIComponent
- toolTipHide Dispatched by the component when its ToolTip is about to be hidden. UIComponent
- toolTipShow Dispatched by the component when its ToolTip is about to be shown. UIComponent
- toolTipShown Dispatched by the component when its ToolTip has been shown. UIComponent
- toolTipStart Dispatched by a component whose toolTip property is set, as soon as the user moves the mouse over it.

The first one is dispatched before the effective creation of the tooltip. This event has a writable property called toolTip that can be used to specify a custom class to be created in place of the standard one (that is the class specified in ToolTipManager.toolTipClass).
You have to implements the IToolTip interface that has two properties:

- screen : Rectangle
- text : String

You get the screen property extending the UIComponent class, so you have to implement only a setter/getter for text.
Actually using this property is not necessary, let's see an example:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

 <mx:Script>
  <![CDATA[
   import mx.core.IToolTip;
   import mx.events.ToolTipEvent;

   private function toolTipCreateHandler(event:ToolTipEvent):void
   {
     var tooltip:IToolTip = new CustomToolTip();
     tooltip.width = 200;
     tooltip.height = 100;
     event.toolTip = tooltip;
   }

  ]]>
 </mx:Script>

 <mx:Button label="ToolTip example" toolTip=" " toolTipCreate="toolTipCreateHandler(event)" />

</mx:Application>


and the tooltip class

package
{
 import mx.containers.Canvas;
 import mx.controls.Label;
 import mx.core.IToolTip;


   override protected function createChildren():void
   {
    if(!helloWorld)
    {
     helloWorld = new Label();
     helloWorld.text = "Hello world";
     addChild(helloWorld);
    }
   }

   public function get text():String
   {
    return null;
   }


   public function set text(value:String):void
   {
   }
 }
}


As you can see we are not using the text property of the ITooltip interface, but it's important to note that we have to set tooltip to something different than null or empty string otherwise the TooltipManager will not be activated.