para - ¿Cómo se renderiza la información sobre herramientas en el botón HTML deshabilitado?

como posicionar un boton en html

Question

Tengo un botón HTML. He intentado renderizar una información sobre herramientas basada en el atributo "título" del botón y no se procesa. Principalmente porque está deshabilitado.

Luego intenté envolver el botón en un lapso y establecer el atributo "título" del tramo.

Pasar el tiempo sobre el botón que está envuelto en el tramo aún no tiene ningún efecto. La información sobre herramientas se representará en cualquier otra parte del tramo que no forme parte de la etiqueta del botón. Al igual que si pongo un texto en el lapso así como en el botón, al pasar el cursor sobre el texto se genera la información sobre herramientas, pero si pasa el puntero sobre el botón, no se procesará.

Entonces, ¿cómo puedo mostrar una información sobre herramientas para un botón deshabilitado?

Answer 1

Este es un error en firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=274626

Answer 2

Lo hice funcionar aplicando los pointer-events: auto; CSS pointer-events: auto; al botón, aunque esto no es compatible con IE <11.

Answer 3

Una solución ideal sería compatible con varios navegadores, y esta sugerencia no lo es; Lo he probado solo en Ubuntu 9.10, aunque con Chrome, Firefox, Epiphany y Opera, y parece funcionar de manera confiable en aquellos, lo que implica confiabilidad en sus contrapartes de Windows. Obviamente, IE es una olla de pescado completamente diferente.

Habiendo dicho eso:

Esta idea está basada en el siguiente (x) html:

<form>
    <fieldset>
        <button disabled title="this is disabled">disabled button</button>
    </fieldset>    
</form>

Y usa el siguiente CSS para lograr algo cercano a tu objetivo:

button  {
    position: relative;
}

button:hover:after {
    position: absolute;
    top: 0;
    left: 75%;
    width: 100%;
    content: attr(title);
    background-color: #ffa;
    color: #000;
    line-height: 1.4em;
    border: 1px solid #000;
}

button {
  position: relative;
  box-sizing: border-box;
}
button:hover:after {
  position: absolute;
  top: 0;
  left: 75%;
  width: 100%;
  content: attr(title);
  background-color: #ffa;
  color: #000;
  line-height: 1.4em;
  border: 1px solid #000;
  box-shadow: 2px 2px 10px #999;
}

<form>

  <fieldset>

    <button disabled title="this is disabled">disabled button</button>

  </fieldset>

</form>

No es ideal, pero fue la mejor idea que no fue JavaScript que se me ocurrió.