Balloon Tooltip in Graphics

MXML File

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

    <mx:Script>

        <![CDATA[

            import mx.controls.Label;

           

            public var tip:Canvas;

           

            public function drawballon():void

            {

                    var gindex:int;

                var pt:Point = new Point(80, 43);

                var global:Point = Application.application.localToGlobal(pt);

                var origin:Point =global;

                var destination:Point = new Point(122,0);

                var lineThickness:Number = 2;

                var lineColor:uint = 0xdddddd;

                var lineAlpha:Number = 1;

                //Alert.show(global.toString());

             

                tip=new Canvas();

                var varnameleng:Number;

                tip.name="stylename";

                tip.graphics.clear();

                tip.graphics.beginFill(0xffffff,1);

                tip.graphics.lineStyle(lineThickness,lineColor,lineAlpha);

                tip.graphics.drawRoundRect(70, -70,150,70,40,40);   

                tip.graphics.moveTo(origin.x,origin.y);

                tip.graphics.lineTo(destination.x,destination.y);

                tip.graphics.lineStyle(2,0xffffff,lineAlpha);

                tip.graphics.lineTo(90,0);

                tip.graphics.lineStyle(2,0xbdbdbd,1);

                tip.graphics.lineTo(origin.x,origin.y);

                tip.graphics.endFill();

                checking.addChild(tip)

            

            }

           

            public function clearGraphics():void

            {

                checking.removeChild(tip);

            }

        ]]>

    </mx:Script>

       

    <mx:Canvas x="124" y="120" width="298" height="163" id="checking" >

        <mx:Button label="Show Me" mouseOver="drawballon();" mouseOut="clearGraphics()" x="41" y="53"/>

    </mx:Canvas>

</mx:Application>

Output Image