Create custom tooltip – toolTipCreate

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 :">
            <mx:Label text="{friend.city}"/>
        </mx:FormItem>
    </mx:Form>

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