Firefox在禁用的输入字段上不显示工具提示

Question

Firefox不会在禁用的字段上显示工具提示。

以下内容在IE / Chrome / Safari中显示工具提示，但在Firefox中不显示：

<input type="text" disabled="disabled" title="tooltip text."/>

为什么Firefox不会在禁用的字段上显示工具提示？有没有解决办法？

- dev.e.loper

---

从Firefox 8开始，禁用元素的标题将在悬停时显示。 - Chris Noe

Answer 1

看起来是一个（非常旧的，被遗弃的）bug。请参见Mozilla Bugs #274626 和 #436770。

我猜这也可以解释为预期行为。

一个可怕的解决方法是将按钮与具有title属性的不可见

重叠，并使用z-index；另一个方法是在“鼠标悬停”时重新激活按钮，但巧妙地拦截并废弃该按钮上的任何click事件。

- Pekka

---

很高兴知道这是一个已知的问题，并且已经报告了。但很遗憾没有人在处理它。感谢提供信息。 - dev.e.loper

我同意。我不确定这是否是一个错误，而是标准的解释，即禁用元素不接收焦点。尽管如此，我可以看到它的有用性。 - Rob

我向Firefox提交了一个补丁，修复了＃274626中禁用的工具提示，希望不久就能发布。 - Brian R. Bondy

Answer 2

我猜你正在使用一些像bootstrap这样的框架。如果是这样，它会在“禁用”元素上添加pointer-events: none，因此所有鼠标事件都会被忽略。

.btn[disabled] {
  pointer-events: auto !important;
}

可以解决这个问题。

- Cam Song

---

你真是个救命恩人！完美地解决了问题...这正是Bootstrap的问题所在...我们只需要在按钮被禁用时仍然显示标题，以便告知最终用户该按钮的作用！;) - Leniel Maccaferri

Answer 3

您可以使用 jQuery 代码解决此问题，例如：

    if ($.browser.mozilla) {
        $(function() {
            $('input[disabled][title]')
                .removeAttr('disabled')
                .addClass('disabled')
                .click(function() {return false})
            })
    }

- Rich

Answer 4

我曾经遇到过类似的问题，但是我使用了jQuery和一些小的CSS类来解决它。你需要创建两个新的span元素和一个CSS类，如下所示：

只需将它们添加到通用的JS和CSS文件中，这些文件在整个应用程序或网站中都会使用。

.DisabledButtonToolTipSpan
{
position    :absolute;
z-index     :1010101010;
display     :block;
width       :100%;
height      :100%;
top         :0;         
}

在Firefox浏览器中显示禁用按钮的工具提示。

$(window).load(function() {
    if ($.browser.mozilla) {
                $("input").each(function() {
                    if ((this.type == "button" || this.type == "submit") && this.disabled) {

                        var wrapperSpan = $("<span>");
                        wrapperSpan.css({ position: "relative" });
                        $(this).wrap(wrapperSpan);

                        var span = $("<span>");
                        span.attr({
                            "title": this.title,
                            "class": "DisabledButtonToolTipSpan"
                        });
                        $(this).parent().append(span);
                    }
                });
            }
        });

希望这可以帮到你， Preetham。

- Preetham.C.N

Answer 5

z-indexing 可以这样实现：

  .btnTip

  {

     position: absolute;

     left: 0%;

     right: 0%;

     z-index: 100;

     width: 50px;

     /*background-color: red;*/

     height: 17px;

  }

(…)

<div style="background-color: gray; width: 400px;">

  Set width of the tip-span to the same as the button width.

  <div style="text-align: center;">

     <span style="position:relative;">

        <span class="btnTip" title="MyToolTip">&nbsp;</span>

        <input type="button" name="" disabled="disabled" value="Save" style="width: 50px;height:17px;" />                                         

     </span>

  </div>             

左右可以帮助将主机定位在禁用元素之上。 层叠顺序定义了你要把一个元素放在哪种层级中。

层叠顺序的数字越高，它就会被放置得越“靠前”。

主机和/或禁用元素的层叠顺序应该动态设置。

当禁用元素被禁用时，你希望提示框主机处于最顶部，反之亦然——至少如果你想在元素（按钮）未被禁用时能够单击它。

- H.E.

Answer 6

你可以使用JavaScript。使用mouseover事件。

（许多库，如JQuery和Mootools，都有可用的工具提示插件。使用这些插件，您甚至可以样式化工具提示）。

- Jimmy Shelter

---

是的，那个立刻就在我脑海中浮现了。但是，如果有一种不需要依赖 JavaScript 就能完成的方法，那就太好了。谢谢。 - dev.e.loper