Flex - Display a panel at the point where mouse is clicked

I would like to create a component(extending from spark Panel), which upon a buttonclick should show up next to the button(something like a bubble popping up or like the small box opening up when hovering up on profile links in facebook/twitter).

I tried to create a com开发者_如何学Pythonponent that implements mx.core.IToolTip and provided the methods required by the interface. And on the toolTipCreate event, set this component as the tooltip.

This works to an extent. When I bring the mouse over the button, the panel appears as the tooltip and goes away when i move the mouse away.

What I need is, the panel should appear next to the button when click on it and should go away only when I click outside the panel or click the close button present inside the panel.

Can you please provide me your suggestions on how to proceed further?

Thanks

   //on the first click... 
   addChild( mouseX , mouseY );

   //or
   component.x = mouseX;
   component.y = mouseY;

   //then tween alpha or make visible
   component.visible = true;

   //for the click outside , assuming parent is not null
   if( event.currentTarget == this.stage || event.currentTarget == this.parent)
     component.visible = false;