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 – toolTipCreate

Posted on May 2, 2010 | No Comments

CustomToolTip.mxml

<?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   :">
            &lt;mx:Label <a href="http://marvabrooks.com/images/">where   can i buy cialis</a>  text=&quot;{friend.city}&quot;/&gt;
        &lt;/mx:FormItem&gt;
    &lt;/mx:Form&gt;
 <a href="http://blogtorn.com/images/">where do you buy viagra</a>     
&lt;/mx:VBox&gt;

<?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]" viewSourceURL="srcview/index.html">
    
    <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:Label text="Move your mouse over the names below to see the custom tooltip" 
        color="#FFFFFF" fontSize="12"   fontStyle="italic"/>
    <mx:Spacer height="40"/>
    <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>

No related posts.

Category: Action Script 3.0, Flex 3, Flex 3 Action Script 3 Tutorial
Tags: | | |

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.