Firefox不會在禁用的輸入字段上顯示工具提示

Question

Firefox不會在禁用的字段上顯示工具提示。

下列顯示工具提示在IE /鉻/ Safari瀏覽器除了火狐：

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

爲什麼上禁用字段不火狐顯示工具提示？有沒有解決這個問題的方法？

Answer 1

似乎是一個（非常古老，非常遺棄）的錯誤。看到Mozilla錯誤#274626#436770

我想這也可以解釋爲預期的行爲。

想到一個可怕的解決方法是使用z-index將按鈕與一個不可見的div重疊，title屬性;另一個以某種方式重新激活按鈕「onmouseover」，但巧妙地攔截並垃圾該按鈕上的任何事件。

Answer 2

您可以使用javascript。使用mouseover事件。

（許多像JQuery和Mootools這樣的庫都提供了工具提示插件，使用它們甚至可以設置工具提示的樣式）。

Answer 3

的z索引的事情可以做這樣的：

.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 4

可以解決這個使用jQuery這樣的代碼：

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

Answer 5

我都面臨着類似的問題，我可以用juery和小CSS類解決它，你將需要創建兩個新的span元素和CSS類如下所示

就在這是在各地的應用程序或網站

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

要顯示工具提示˚F使用一般的JS和CSS文件中添加這些或在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

我想你正在使用一些框架，如bootstrap。如果是這樣，它會將pointer-events: none添加到「禁用」元素，因此所有鼠標事件都將被忽略。

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

可以解決這個問題。