RichEditableText 内图像元素的工具提示答案

【问题标题】：Tooltip on Image element inside RichEditableTextRichEditableText 内图像元素的工具提示
【发布时间】：2011-10-31 01:02:30
【问题描述】：

我有以下几点：

<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

【问题讨论】：

哎呀！打错了按钮！我尝试在解决 id ccIMG 0 的 init 函数中设置工具提示尝试了其他几件事，但没有运气（现在不记得了！）
哇！ Flextras 的代表名列前 1%！太棒了！

标签： apache-flex actionscript tooltip flash-builder image

【解决方案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>

然后你在整个文本组件上监听 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');
    }
}

【讨论】：