ActionScript 3.0, Adobe Flex

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




 
 

 
  
 

 
  
   
  
  
   
  
  
   
  
 


Advertisements

2 thoughts on “Adobe Flex : Custom ToolTip Implementation Sample

  1. it possible to generate a tooltip with a specific background color (at runtime) when mouse is over a line (flex sprite)

    something like this:
    mySpriteLine.addEventListener(MouseEvent.MOUSE_OVER, myToolTipHandler(e, myColor);

    private function myToolTipHandler(e:MouseEvent, bgColor:String):void {

    //i need here a custom tooltip
    var ctooltip:Tooltip = new ToolTip();
    ctooltip.Tex = “Testing Background color”;
    ctooltip.setStyleProporty(“backgroundColor”, lineColor);

    // what i must suppose to do to show tooltips with backgroundcolor

    }

    // my trouble is: not works!!!! please help!!!!

    by the way, i’m following in twitter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s