Firefox không hiển thị chú giải công cụ trên các trường nhập bị vô hiệu hóa

Question

Firefox không hiển thị chú giải công cụ trên các trường bị tắt.

Các hiển thị sau tooltip trong IE/Chrome/Safari trừ Firefox:

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

Tại sao không Firefox hiển thị tooltip trên lĩnh vực khuyết tật? Có một công việc xung quanh điều này?

Answer 1

Có vẻ là một lỗi (rất cũ và rất bị bỏ rơi). Xem Mozilla Bugs #274626#436770

Tôi đoán điều này cũng có thể được giải thích là hành vi dự định.

Một cách giải quyết khủng khiếp mà bạn nghĩ đến là chồng chéo nút với div ẩn với thuộc tính title sử dụng z-index; khác bằng cách nào đó kích hoạt lại nút 'onmouseover' nhưng để đánh chặn khéo léo và thùng rác bất kỳ sự kiện click nào trên nút đó.

Answer 2

Bạn có thể sử dụng javascript. Sử dụng sự kiện di chuột qua.

(Rất nhiều thư viện như JQuery và Mootools có plugin công cụ có sẵn. Sử dụng các công cụ này, bạn thậm chí có thể tạo kiểu chú giải công cụ).

Answer 3

Điều z-index có thể được thực hiện như thế này:

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

trái và phải giúp định vị máy chủ ở trên phần tử bị tắt. Chỉ số z xác định loại lớp mà bạn đặt một phần tử vào.

Số cao hơn của một lớp z càng cao thì càng cao.

Chỉ mục z của máy chủ và/hoặc phần tử bị tắt sẽ được đặt động.

Khi phần tử bị tắt bị tắt, bạn muốn lưu trữ chú giải công cụ ở trên cùng và ngược lại - ít nhất là nếu bạn muốn có thể nhấp vào phần tử (nút) khi nó KHÔNG bị vô hiệu hóa.

Answer 4

Bạn có thể làm việc xung quanh này với mã jQuery như:

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

Answer 5

tôi đã phải đối mặt với vấn đề tương tự và tôi có thể sửa chữa nó bằng cách sử juery và lớp css nhỏ, bạn sẽ yêu cầu để tạo ra hai yếu tố tuổi mới và một lớp css định như sau

Chỉ cần thêm những trong một js nói chung và tập tin css được sử dụng trong khắp nơi trên ứng dụng hoặc web site

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

Để hiển thị tooltip f hoặc nút bị tắt trong trình duyệt 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); 
        } 
       }); 
      } 
     }); 

Hy vọng điều này sẽ giúp, Preetham.

Answer 6

Tôi đoán bạn đang sử dụng một số khung như bootstrap. Nếu vậy, nó thêm pointer-events: none vào phần tử 'đã tắt', vì vậy tất cả các sự kiện chuột đều bị bỏ qua.

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

có thể khắc phục sự cố.