RichEditableText中图像元素的工具提示

Question

我有以下几点：

<s:RichEditableText>        
    <s:textFlow>
        <s:TextFlow>
             <s:p><s:a click="linkelement1_clickHandler(event);"><s:img id="ccIMG" source="{imgCls}"></s:img></s:a></s:p>
       </s:TextFlow>
    </s:textFlow>
</s:RichEditableText>

我想在img元素上显示一个工具提示--还没弄明白--有人想过吗？

谢谢!

mce

Answer 1

您面临的问题是，图像不会像显示列表上的其他元素那样调度常规事件。更准确地说，它不会调度MOUSE_OVER或ROLL_OVER事件以供您侦听和显示工具提示。

因此，您必须在整个RichEditableText上侦听这些事件，并进行一些点击测试，以检测鼠标是否在图像上。

假设你有一些这样的文本流：

<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>

然后监听整个textcomponent上的mouseOver事件。

然后，要测试鼠标是否在图像上，请实现mouseOver处理程序：

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');
    }
}