Question

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

以下显示除Firefox之外的IE / Chrome / Safari中的工具提示：

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

为什么Firefox在禁用的字段上显示工具提示？有没有解决这个问题？

Answer 1

似乎是一个（非常古老，非常放弃）的错误。请参阅Mozilla错误#274626 #436770

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

我想到的一个可怕的解决方法是使用title将按钮与带有z-index属性的不可见div重叠;另一个以某种方式重新激活按钮'onmouseover'，但巧妙地拦截并删除该按钮上的任何click事件。

Answer 2

我猜你正在使用像 bootstrap 这样的框架。如果是这样，它会将pointer-events: none添加到'disabled'元素，因此忽略所有鼠标事件。

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

可以解决问题。

Answer 3

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

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

Answer 4

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>

左右帮助将主机定位在禁用元素的顶部。 z-index定义了元素所在的层。

z层的数量越多，它就越“顶部”。

应动态设置主机和/或禁用元素的z-index。

当禁用禁用元素时，您希望工具提示主机位于顶部，反之亦然 - 至少如果您希望能够在未禁用时单击元素（按钮）。

Answer 5

我遇到了类似的问题，我可以使用juery和小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。

Answer 6

你可以使用javascript。使用鼠标悬停事件。

（许多像JQuery和Mootools这样的库都提供了工具提示插件。使用这些插件你甚至可以设置工具提示的样式。）

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

6 个答案: