Flex tooltip positioning incorrectly

Question

Let's say I'm trying to place a tooltip on the left side of a component on my view. Layout may look similar to this:

<mx:HBox>

    <mx:Button id="btnBack"
                label="Back"
                click="btnBack_click();" />

    <mx:Button id="btnFirstLoadDemo"
                label="First Load Demo"
                click="btnFirstLoadDemo_click();" />

</mx:HBox>

I'm using the code below to obtain the location to place the tooltip:

var pt:Point = new Point(btnFirstLoadDemo.x, btnFirstLoadDemo.y);
pt = btnFirstLoadDemo.contentToGlobal(pt);

After the point is converted via contentToGlobal(), the point's x coordinate is drastically incorrect.

I've found a way to workaround this by simply wrapping the target component in another HBox like this:

<mx:HBox>

    <wcb:Button id="btnBack"
                label="Back"
                click="btnBack_click();" />
    <mx:HBox>
        <wcb:Button id="btnFirstLoadDemo"
                label="First Load Demo"
                click="btnFirstLoadDemo_click();" />
    </mx:HBox>

</mx:HBox>

Any idea what's going on here?

Answer 1

You're mixing up coordinate spaces. x and y are in the coordinate space of the parent container, but you're converting as if they were in the coordinate space of the button itself.

<mx:HBox id="container">
    <mx:Button id="btnBack" />
    <mx:Button id="btnFirstLoadDemo" />
</mx:HBox>

with

var pt:Point = new Point(btnFirstLoadDemo.x, btnFirstLoadDemo.y);
var globalPoint:Point = container.contentToGlobal(pt);