Tooltip on Image element inside RichEditableText

I have the following:

<s:RichEditableText>        
    <s:textFlow>
        <s:TextFlow>
             <s:p><s:a click="link开发者_运维问答element1_clickHandler(event);"><s:img id="ccIMG" source="{imgCls}"></s:img></s:a></s:p>
       </s:TextFlow>
    </s:textFlow>
</s:RichEditableText>

I want to display a tooltip on the img element - haven't figured this one out - ideas anyone?

thanks!

mce

The problem you're facing is that the image won't dispatch regular events as other elements on the displaylist will. To be more precise, it will not dispatch MOUSE_OVER or ROLL_OVER events for you to listen for and display a tooltip.

So you'll have to listen for those events on the entire RichEditableText and do some hit-testing to detect whether the mouse is over an image or not.

Suppose you have some textflow like this:

<s:RichEditableText width="100%" height="100%" mouseOver="toggleTooltip()">
    <s:textFlow>
        <s:TextFlow>
            <s:p>
                <s:span>Some text before</s:span>
                <s:img id="myImg" source="myImg.png" />
                <s:span>Some text after</s:span>
            </s:p>
        </s:TextFlow>
    </s:textFlow>
</s:RichEditableText>

And you listen for mouseOver events on the entire textcomponent.

Then to test if the mouse is over your image, implement the mouseOver handler:

private function toggleTooltip():void {
    var graphic:DisplayObject = myImg.graphic;
    var anchor:Point = graphic.localToGlobal(new Point(0, 0));

    if (mouseX >= anchor.x && mouseX <= anchor.x + graphic.width &&
        mouseY >= anchor.y && mouseY <= anchor.y + graphic.height) 
    {
        trace('show tooltip');
    }
    else {
        trace('hide tooltip');
    }
}