工具提示（标题=“...”）不会显示在Firefox中 [英] Tooltips (title="...") won't show in Firefox

问题描述

我有一个带有 title 属性的元素（即工具提示），包装在一些容器中：

 < div id =foo> 
< input type =texttitle =A tooltip/> 
< / div> 
  

并附加mousemove监听器停止事件传播：

  document.getElementById（'foo'）。addEventListener（
'mousemove '，
 function（e）{e.stopPropagation（）}，
 false 
）
  

停止在容器上传播mousemoves的组合现在可防止在Firefox 2及以上的内部文本框中显示工具提示。我尝试过FF 2 [.0.0.20]，3 [.0.11]和最新的3.5（Windows Server 2003，XP）。

， Firefox 用户可以通过在地址栏中运行以下等效逻辑来查看此错误：

  javascript：void（$（'div.vote'）。mousemove（function（e）{e.stopPropagation（）}））
  

现在鼠标悬停此问题的任何投票，投票或星号（收藏夹）图标。工具提示不再显示。

更新：看来Firefox使用鼠标停止移动在浏览器Chrome中触发工具提示（例如，返回/前进按钮）。请参见 https://bugzilla.mozilla.org/show_bug.cgi?id=82953。

更新：看来Firefox 10是最后一个展示此行为的版本。

：Firefox 33（.1）不再显示此行为。

>

解决方案

我已确认此问题。我甚至尝试使用以下代码手动将事件传播到输入框：

 < div id =footitle =A tooltip 2> < input title =A tooltiptype =textid =bar/> 
< / div> 
< script type =text / javascript> 
 document.getElementById（'foo'）。addEventListener（
'mouseover'，
 function（e）{
 e.stopPropagation（）; 
 if createEvent）{
 var inputBox = document.getElementById（'bar'）; 
 var evt = document.createEvent（MouseEvents）; 
 evt.initMouseEvent（mousemove，true，true ，window，e.detail，e.screenX，e.screenY，e.clientX，e.clientY，false，false，false，false，null，null）; 
 inputBox.dispatchEvent（evt）; 
} 
}，
 false 
）
< / script> 
  

没有骰子。但是，其他鼠标事件（包括mouseover）似乎工作正常。

我相信这是一个错误。虽然它不在bugzilla中列出，但搜索似乎表示相关性。

您可以下载最新的 Firefox night这里，看看它是否仍然存在。如果是，请提交错误。

或者，我会看到mouseover是否会给你所需的效果。

I have an element with a title attribute (ie, a tooltip), wrapped in some container:

<div id="foo">
    <input type="text" title="A tooltip" />
</div>

and I attach a "mousemove" event listener on the container and stop event propagation:

document.getElementById('foo').addEventListener(
    'mousemove',
    function(e) { e.stopPropagation() },
    false
)

This combination of stopping propagation of "mousemoves" on the container now prevents the tooltip from showing up for the inner textbox, in Firefox 2 and upwards. I've tried FF 2[.0.0.20], 3[.0.11], and the latest 3.5 (Windows Server 2003, XP).

As a quick exercise, Firefox users can see this bug in action by running the following equivalent logic as above in your address bar:

javascript:void($('div.vote').mousemove(function(e){ e.stopPropagation() }))

Now mouseover any of the vote up, vote down, or star (favorites) icons for this question. The tooltips no longer appear. Again, in Firefox only.

Does anyone have a workaround for this behavior/bug in Firefox? Has anyone else witnessed this?

Update: It appears Firefox uses "mouse stopped moving" to trigger tooltips in the browser chrome (eg back/forward buttons). See https://bugzilla.mozilla.org/show_bug.cgi?id=82953. However I can't tell if this affects the DOM.

Update: It appears Firefox 10 was the last version exhibiting this behavior. Firefox 11.0 and onwards shows tooltips regardless of event propagation.

Update: Firefox 33(.1) no longer exhibits this behavior.

解决方案

I've confirmed this issue. I even tried propagating the event by hand to only the input box using this code:

<div id="foo" title="A tooltip 2"> <input title="A tooltip" type="text" id="bar"/>
</div>
<script type="text/javascript">
document.getElementById('foo').addEventListener(
    'mouseover',
    function(e) {
        e.stopPropagation();
        if (document.createEvent) {
            var inputBox = document.getElementById('bar');
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("mousemove", true, true, window, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, null, null);
            inputBox.dispatchEvent(evt);
        }
    },
    false
)
</script>

No dice. However, other mouse events, including mouseover, seem to work fine.

I believe this is a bug. Although it isn't listed in bugzilla, a search does seem to indicate a correlation between the event "mouseover" and tooltips.

You might download the latest nightly build of Firefox here and see if it still is there. If it is, file a bug.

As an alternative, I would see if mouseover might give you the desired effect.

这篇关于工具提示（标题=“...”）不会显示在Firefox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！