Firefox no muestra información sobre herramientas en los campos de entrada deshabilitados

Question

Firefox no muestra información sobre herramientas en los campos deshabilitados.

La siguiente muestra información sobre herramientas en el IE/Chrome/Safari, excepto Firefox:

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

¿Por qué no Firefox pantalla información sobre herramientas en campos con discapacidad? Hay un trabajo alrededor de esto?

Answer 1

Parece ser un error (muy antiguo y muy abandonado). Ver errores de Mozilla #274626#436770

Supongo que esto también podría explicarse como un comportamiento previsto.

Una solución horrible que viene a la mente es superponer el botón con un div invisible con un atributo title usando z-index; otro para reactivar de alguna manera el botón 'onmouseover' pero para interceptar hábilmente y anular cualquier evento click en ese botón.

Answer 2

Puede usar javascript. Usa el evento mouseover.

(Muchas bibliotecas como JQuery y Mootools tienen complementos de información sobre herramientas disponibles. Con estos puede personalizar las sugerencias de herramientas).

Answer 3

Lo z-indexación podría hacerse así:

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

izquierda y derecha ayuda de posicionamiento el host en la parte superior del elemento desactivado. El índice z define en qué tipo de capa se inserta un elemento.

Cuanto mayor sea el número de capas z, más "en la parte superior" estará.

El índice z del host y/o el elemento deshabilitado debe establecerse dinámicamente.

Cuando el elemento deshabilitado está deshabilitado, desea el host de información sobre herramientas en la parte superior y viceversa, al menos si desea poder hacer clic en su elemento (botón) cuando NO está deshabilitado.

Answer 4

Puede solucionar esto con código de jQuery como:

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

Answer 5

he enfrentado al problema similar y que podría fijarlo con juery y la clase css pequeña, que requeriría la creación de dos nuevos elementos span y una clase CSS que son los siguientes

Sólo añadir estos en un js generales y archivo CSS que se utiliza en todo el sitio de aplicación o web

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

Para mostrar información sobre herramientas f o botón desactivado en el navegador 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); 
        } 
       }); 
      } 
     }); 

Espero que esto ayude, Preetham.

Answer 6

Supongo que está utilizando algunos marcos como bootstrap. Si es así, agregue pointer-events: none al elemento 'disabled', por lo que se ignorarán todos los eventos del mouse.

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

puede solucionar el problema.