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

您遇到的问题是图像不会像Displaylist上的其他元素一样调度常规事件。更准确地说，它不会发送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');
    }
}

RichEditableText中Image元素的工具提示

1 个答案: