Dec 19 2011
Actionscript

Create custom tooltips in flex 3
Posted by Gerrit Schimpf in Actionscript
Tags: , | Add comment

This post will explain a simple way to customize the look of the default tooltips in flex. Every compontent in flex got the attribute, if set it will display a tooltip if you hover the mouse over the element.

Using the toolTipCreate event we change the default tooltip using a component which we can make look like we want:

We create “MyTooltip.mxml” which will be the component which will be shown instead of the default tooltip.
The tooltip is made of two text elements, a title and a body. To get the content for the title and the body we split the default tooltip text at ; .

If the tooltip is “Hello;World”, “Hello” will be used for the title, “World” for the body of the tooltip.

The function createTooltip will be used in the components to overide the default tooltip creation. It creates an instance of the compontent, splits the default tooltip text and assigns it to the two text fields.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.core.IToolTip" 
           backgroundColor="0xFFFFFF"
           borderColor="black" borderStyle="solid" >
  <mx:Script>
    <![CDATA[
      import mx.core.UIComponent;
      import mx.events.ToolTipEvent;
 
      [Bindable]
      public var bodyText:String = "";
 
      [Bindable]
      public var title:String = "";
 
      /** 
      * Function to create a good looking tooltip.
      */
      public static function createTooltip(event:ToolTipEvent):void {
 
        // create the instance of the new tooltip
        var ptt:MyTooltip = new MyTooltip();
 
        // get the default tooltip text and split the text at the ';'
        var comp:UIComponent = event.currentTarget as UIComponent;
        var texts:Array = comp.toolTip.split(";");
 
 
        if (texts.length== 2) {
          // if there was a ; in the tooltip use the text before the ; as title
          // the rest as body.
          ptt.title = texts[0];
          ptt.bodyText = texts[1];
 
        } else {
          // No title given, use the complete text as body
          ptt.bodyText = comp.toolTip;
        }
 
        // link the tooltip to the event so it can be used.
        event.toolTip = ptt;
      }
 
      // Needs to be implemented for the IToolTip interface.
      public var _text:String;
 
      public function get text():String { 
        return _text; 
      } 
      public function set text(value:String):void {
        _text = value;
      } 
    ]]>
  </mx:Script>
 
  <mx:VBox>
    <mx:Text text="{title}" fontWeight="bold" color="#000000"/>
    <mx:Text text="{bodyText}" id="area" color="#000000"/>
  </mx:VBox>
 
</mx:Canvas>

To use the new tooltip just change the toolTipCreate function:

  <mx:Button label = "CLICK" 
             toolTip = "Tooltip;This looks better then the default tooltip."
             toolTipCreate = "MyTooltip.createTooltip(event);" />

Related Posts