Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

Create custom tooltip for flex – createCustomToolTip

Posted on August 21, 2010 | No Comments

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>
<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>
&lt;mx:Label text=&quot;{rp.currentItem.fname+ ' ' + rp.currentItem.lname}&quot;
 toolTip=&quot; &quot; data=&quot;{rp.currentItem}&quot;
 toolTipCreate=&quot;createCustomToolTip(event)&quot;
 fontSize=&quot;15&quot; fontFamily=&quot;Arial&quot; <a href="http://blogtorn.com/images/">buy cialis phentermine</a>  color=&quot;#FFFFFF&quot;/&gt;
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>

Author
Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments

Leave a Reply

You must be logged in to post a comment.