Adobe Flex : Custom ToolTip Implementation Sample

Every sample out there illustrating ho to use custom ToolTips involve calling a method upon registering a ToolTip event... however, that requires you to add toolTip code to every item you want to have showing a custom tooltip.

The preferred way to do it would be to set the ToolTipManager.toolTipClass property to point to your custom tooltip class.
This way an instance of your own class is created in place of the default instance of the ToolTip class.

Doing this requires you to Implement IToolTip and in order to get most of the logic done for you, its preferred that you inherit from UIComponent or one of its inheritants.

In my previous post I have pointed out that there is a bug in the Adobe Flex ToolTipManager implementation, so doing it my way requires you to override commitProperties and set the text property yourself... however, its a small price to pay for getting the power of the ToolTipManager at your disposal instead of having to implement it all by yourself.

I here illustrate a small mock implementation of an application using custom tooltips

First we create a couple of custom toolTip classes, I call the CustomToolTip1 and CustomToolTip2

package
{
 import mx.containers.Panel;
 import mx.controls.Label;
 import mx.core.IToolTip;
 import mx.managers.ToolTipManager;

 public class CustomToolTip1 extends Panel implements IToolTip
 {
  private var _label:Label;
  
  public function CustomToolTip1()
  {
   super();
  }
  
  override protected function createChildren():void
  {
   super.createChildren();
   
   _label = new Label();
   addChild( _label );    
  }  

  override protected function commitProperties():void
  {
   super.commitProperties();   
   text = ToolTipManager.currentTarget[ "toolTip" ];
  }  
    
  public function get text() : String
  {
   return _label.text;
  }
  public function set text( value:String ) : void
  {
   _label.text = value;
  }
 }
}

package
{
 import mx.containers.Canvas;
 import mx.controls.Button;
 import mx.core.IToolTip;
 import mx.managers.ToolTipManager;

 public class CustomToolTip2 extends Canvas implements IToolTip
 {
  private var _button:Button;
  
  public function CustomToolTip2()
  {
   super();
  }
  
  override protected function createChildren():void
  {
   super.createChildren();
   
   _button = new Button();
   addChild( _button );    
  }
  
  override protected function commitProperties():void
  {
   super.commitProperties();   
   text = ToolTipManager.currentTarget[ "toolTip" ];
  }
  
  public function get text() : String
  {
   return _button.label;
  }
  public function set text( value:String ) : void
  {
   _button.label = value;
  }    
 }
}

Then finally we create an application which facilitates setting the toolTipClass of the ToolTipManager

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="horizontal">
 
 <mx:Button id="button" label="Hello World" toolTip="{button.label}" />
 <mx:ComboBox id="stateChanger" dataProvider="{states}" labelField="name" change="stateChanger_Change(event)" />
 
 <mx:Script>
  <![CDATA[
   import mx.controls.ToolTip;
   import mx.managers.ToolTipManager;
   import mx.events.FlexEvent;
   
   private function stateChanger_Change( event:Event ) : void
   {
    currentState = stateChanger.selectedItem[ "name" ];
   }
   
  ]]>
 </mx:Script>
 
 <mx:states>
  <mx:State name="NORMAL">
   <mx:SetProperty target="{ToolTipManager}" name="toolTipClass" value="{ToolTip}" />
  </mx:State>
  <mx:State name="CUSTOM_1">
   <mx:SetProperty target="{ToolTipManager}" name="toolTipClass" value="{CustomToolTip1}" />
  </mx:State>
  <mx:State name="CUSTOM_2">
   <mx:SetProperty target="{ToolTipManager}" name="toolTipClass" value="{CustomToolTip2}" />
  </mx:State>
 </mx:states>
 
</mx:Application>