Most Popular

• Create a sliding content in flash
• Flash Flip Letter Effect
• Create a Show/Hide Sliding Panel using Flex
• 3D rotation with Flash CS4
• Capture images from the webcam
• Sliding menu with actionscript 3 and TweenLite
• Create a 360° panorama viewer with AS3
• Create an Auto-Scrolling Vertical Content
• Eyes follow the cursor
• Circular rotation with as3

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.

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