Create Custom ToolTip

This is a simple Flex application to create custom tool tip using "toolTipCreate" event.

The tool tip component
1. create a component and name it as "CustomTip.mxml"

<?xml version="1.0" encoding="utf-8"?> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="horizontal"

  implements="mx.core.IToolTip" 

width="200" 

alpha=".8" 

borderThickness="1" 

backgroundColor="0xCCCCCC" 

dropShadowEnabled="true" 

borderColor="black" 

borderStyle="solid" 

headerHeight="0" 

cornerRadius="2"> 

<mx:Script> 

<![CDATA[ 

/* */

 [Bindable] 

public var toolTipString:String; 

[Bindable] 

public var toolTipImage:String; 

/* 

Implement required methods of the IToolTip interface; these 

methods are not used in this example, though. 

*/

public var _text:String; 

public function get text():String 

{

 return _text; 

}

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

]]> 

</mx:Script> 

<mx:Image source="{toolTipImage}" /> 

<mx:Text text="{toolTipString}" percentWidth="100"/> 

</mx:Panel>

2. The main mxml application "CustomToolTipSample.mxml"

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

creationComplete="init()"> 

<mx:Script> 

<![CDATA[

import mx.utils.StringUtil; 

import mx.managers.ToolTipManager; 

import components.CustomTip; 

import mx.events.ToolTipEvent; 

private function onTooltipCreate( title:String, message:String, url:String, event:ToolTipEvent ):void 

{

var pnl:CustomTip = new CustomTip(); 

pnl.toolTipString = message; 

pnl.toolTipImage = url; event.toolTip = pnl; 

} 

/* */ 

private function init():void 

{ 

ToolTipManager.hideDelay = 10000; 

} 

]]> 

</mx:Script> 

<mx:Button 

label="My Custom ToolTip" toolTip=" " 

toolTipCreate="onTooltipCreate('Test Heading','Test on custom tool tip', 'assets/application_error.png', event)" />

</mx:WindowedApplication>

Note:-Here in this example the component is created inside the folder called "components", and inorder to run this application place an image in the assets folder and pass the name of the image as the second parameter in onTooltipCreate() method.