Create custom tooltip for your flex apps

Create custom tooltip for your flex apps

In this tutorial , we will see how to create a fully custom ToolTip that appears when the mouse is over a specific object.

View DemoDownload Source

1. Create a new flex project named Tooltip, name your MXML application file main.mxml and set its layout to vertical.

2. First, we need to create the custom ToolTip component by extending the VBox container and implementing the IToolTip interface.
To do so, create a new MXML component named CustomToolTip, based on a VBox and set some of its style.
The VBox implements the IToolTip interface which obliged us to implement required methods of the IToolTip interface :

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
 implements="mx.core.IToolTip"
 borderThickness="5"
 backgroundColor="#FFFFFF"
 borderColor="black"
 borderStyle="solid"
 cornerRadius="10" horizontalAlign="center" paddingTop="10">

 <mx:Script>
 <![CDATA[

 //  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:VBox>

Then , we declare a Bindable variable Object named friend that holds the datas of a person

<mx:Script>
 <![CDATA[
 [Bindable]
 public var friend:Object;

 //  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>

and we display the datas in this way :

<mx:Image source="{friend.pic}"/>
<mx:Form paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
 <mx:FormItem label="Last Name :">
 <mx:Label text="{friend.lname}"/>
 </mx:FormItem>
 <mx:FormItem label="First Name :">
 <mx:Label text="{friend.fname}"/>
 </mx:FormItem>
 <mx:FormItem label="Email :">
 <mx:Label text="{friend.email}"/>
 </mx:FormItem>
 <mx:FormItem label="City :">
 <mx:Label text="{friend.city}"/>
 </mx:FormItem>
</mx:Form>

You will understand where the pic, lname, fname, email and city properties of the variable friend come from as we move on to step 3.

3. Now that we have built the tooltip component, we can add this component in our application.
Open main.mxml application, and first declare in a Script tag an ArrayCollection variable defined as bindable that contains all the infos about your friends.

[Bindable]
private var friends : ArrayCollection = new ArrayCollection([
 {lname:"Simpson",fname:"Bart", pic:"assets/bart.jpg",
 email:"bartsimpson@springfield.com",city:"Springfield"},
 {lname:"Simpson",fname:"Homer", pic:"assets/homer.jpg",
 email:"homersimpson@springfield.com",city:"Springfield"},
 {lname:"Albertson",fname:"Jeff", pic:"assets/jeffalbertson.jpg",
 email:"jeffalbertson@springfield.com",city:"Springfield"},
 {lname:"Simpson",fname:"Lisa", pic:"assets/lisa.jpg",
 email:"lisasimpson@springfield.com",city:"Springfield"},
 {lname:"Simpson",fname:"Marge", pic:"assets/marge.jpg",
 email:"margesimpson@springfield.com",city:"Springfield"},
 {lname:"Flanders",fname:"Ned", pic:"assets/ned.jpg",
 email:"nedflanders@springfield.com",city:"Springfield"}
]);

4. Next we add a Repeater component and set its dataProvider to the variable friends. Inside the Repeater, we place a Label which displays the first name and last name of a friend and set its tooltip property to an empty String. Also we set the data property to the current item of the repeater.

<mx:Repeater id="rp" dataProvider="{friends}">
 <mx:Label text="{rp.currentItem.fname+ ' ' + rp.currentItem.lname}"
 toolTip=" " data="{rp.currentItem}"
 fontSize="15" fontFamily="Arial" color="#FFFFFF"/>
 </mx:Repeater>

5. Next, we add listener to the Label for the toolTipCreate event.

<mx:Label text="{rp.currentItem.fname+ ' ' + rp.currentItem.lname}"
 toolTip=" " data="{rp.currentItem}"
 toolTipCreate="createCustomToolTip(event)"
 fontSize="15" fontFamily="Arial" color="#FFFFFF"/>

This event is handled by the createCustomToolTip function. Inside this function, we instantiate the new CustomToolTip that we have created and set its friend property. Then we point the toolTip property of the ToolTipEvent object to the new CustomToolTip.

private function createCustomToolTip(event:ToolTipEvent):void {
    var toolTip:CustomToolTip = new CustomToolTip();
    toolTip.friend = event.target.data;
    event.toolTip = toolTip;
}

6. And the final code looks like this:
CustomToolTip component :

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
 implements="mx.core.IToolTip"
 borderThickness="5"
 backgroundColor="#FFFFFF"
 borderColor="black"
 borderStyle="solid"
 cornerRadius="10" horizontalAlign="center" paddingTop="10">

 <mx:Script>
 <![CDATA[
 [Bindable]
 public var friend:Object;

 //  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="{friend.pic}"/>
 <mx:Form paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
 <mx:FormItem label="Last Name :">
 <mx:Label text="{friend.lname}"/>
 </mx:FormItem>
 <mx:FormItem label="First Name :">
 <mx:Label text="{friend.fname}"/>
 </mx:FormItem>
 <mx:FormItem label="Email :">
 <mx:Label text="{friend.email}"/>
 </mx:FormItem>
 <mx:FormItem label="City :">
 <mx:Label text="{friend.city}"/>
 </mx:FormItem>
 </mx:Form>
</mx:VBox>

and the main application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="vertical"
 backgroundGradientAlphas="[1.0, 1.0]"
 backgroundGradientColors="[#7C2B2B, #370B0B]">

 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.events.ToolTipEvent;

 [Bindable]
 private var friends : ArrayCollection = new ArrayCollection([
 {lname:"Simpson",fname:"Bart", pic:"assets/bart.jpg",
 email:"bartsimpson@springfield.com",city:"Springfield"},
 {lname:"Simpson",fname:"Homer", pic:"assets/homer.jpg",
 email:"homersimpson@springfield.com",city:"Springfield"},
 {lname:"Albertson",fname:"Jeff", pic:"assets/jeffalbertson.jpg",
 email:"jeffalbertson@springfield.com",city:"Springfield"},
 {lname:"Simpson",fname:"Lisa", pic:"assets/lisa.jpg",
 email:"lisasimpson@springfield.com",city:"Springfield"},
 {lname:"Simpson",fname:"Marge", pic:"assets/marge.jpg",
 email:"margesimpson@springfield.com",city:"Springfield"},
 {lname:"Flanders",fname:"Ned", pic:"assets/ned.jpg",
 email:"nedflanders@springfield.com",city:"Springfield"}
 ]);
  
private function createCustomToolTip(event:ToolTipEvent):void {
  var toolTip:CustomToolTip = new CustomToolTip();
  toolTip.friend = event.target.data;
  event.toolTip = toolTip;
}

 ]]>
 </mx:Script>

 <mx:Label text="FRIENDS" color="#FFFFFF"
 fontWeight="bold" fontFamily="Arial" fontSize="25"/>

 <mx:Repeater id="rp" dataProvider="{friends}">
 <mx:Label text="{rp.currentItem.fname+ ' ' + rp.currentItem.lname}"
 toolTip=" " data="{rp.currentItem}"
 toolTipCreate="createCustomToolTip(event)" fontSize="15" fontFamily="Arial" color="#FFFFFF"/>
 </mx:Repeater>

</mx:Application>

7. Run the application to see in in action

18 thoughts on “Create custom tooltip for your flex apps

  1. RiaCodes

    Hey Hans, you need to use the time delay properties of the ToolTipManager that are showDelay, hideDelay and scrubdelay.
    Don’t know which one you want to change so check this.

    example : ToolTipManager.showDelay = 1000 ;
    /* (time in ms, the tooltip will appear 1 second after the user has moved the mouse over a component that has a ToolTip).*/

    Stay tuned

  2. hans

    Hi,

    I’ve tried this, but with no luck
    (I want to use the ToolTipManager.hideDelay = 3000;) where in your example would you put this extra line?

    thanks!

  3. RiaCodes

    Create a function to put your code

    private function initApp():void{
    ToolTipManager.hideDelay = 3000;
    }

    and call this function for the creationComplete event of the Application

  4. hans

    Thank you.

    My mistake, I want to create a custom tooltip which stays visible after the user moves the mouse of the component…. but hideDelay = “The amount of time, in milliseconds, that Flex waits to hide the ToolTip after it appears.” is not the way to go…

    I now use a custom panel which I show/hide when necessary…

  5. Atul Singh Parihar

    Hi,
    I hope u doing well. i am glade after see this but i have a some problem if you use
    horizontalAlign=”right”
    verticalAlign=”bottom”
    in main.mxml then its not proper show plz give me solution.
    this is bug in this code .
    i hope i got reply as soon as possible

    thanks

  6. Alex

    I do not understand what is : var toolTip:ContactToolTip = new ContactToolTip();
    Where can I find the ContactToolTip class ? Did I miss something ?

  7. admin Post author

    @ ALEX :
    Hi, sorry that was a mistake, it’s not var toolTip:ContactToolTip = new ContactToolTip();
    but it’s var toolTip:CustomToolTip = new CustomToolTip();

    We have corrected it

    Thanks for pointing it out

  8. Ws

    Hi,

    Very useful tool.
    I Integrated with my AIR app. I came across an issue, If the tool tip opens at the bottom of the screen it starts flickering and doesn’t show correctly. Is there some fix for this issue.

    Thanks

  9. Sam Sha

    it’s good demo, but I find a small bug, when the tooltip show at the right bottom corner, it is flickering – show and hide then show … any good idea?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>