Flex: Custom Tooltip - IToolTip

While Creating the Tooltip the main thing is, the particular component/control's attribute toolTip=" " must contain space or any char's, but should not be empty or null.

Sample Main: /*Main.mxml*/

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

 <mx:Script>
  <![CDATA[
   import com.abdul.TipComp;
   import mx.events.ToolTipEvent;

   private function callTootTip(e:ToolTipEvent):void
   {
    var touchedLabel:String = e.target.label;

    var tc:TipComp = new TipComp();
    tc.setText = touchedLabel; // pass value to the component.

    e.toolTip = tc;
   }
  ]]>
 </mx:Script>

 <mx:Button label="Tool Tip Button"
      toolTip=" "
      toolTipCreate="callTootTip(event)"/>
</mx:Application>

Here,
1. In the user define component we have to implement the IToolTip interface like this implements="mx.core.IToolTip".
2. The setText (it is a user define method for our convenience) method is used to get the value from the caller.
3. Image is used as a ToolTip.

Sample Component: /*TipComp.mxml*/

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
   implements="mx.core.IToolTip"
   horizontalAlign="center"
   verticalAlign="middle">

 <mx:Script>
  <![CDATA[
   import mx.core.IToolTip;
   
   [Bindable]
   private var value:String = "";

   /* used to get value from the caller */
   public function set setText(value:String):void
   {
    this.value = value;
   }

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

   public function get text():String
   {
    return "";
   }
  ]]>
 </mx:Script>
 
 <mx:Label id="lab"
     text="{value}"/>
 <mx:Image x="87"
     y="10"
     height="280"
     width="226"
     source="@Embed(source='Earth_axis.jpg')"/>
</mx:VBox>