Activar evento onmouseover cuando el elemento está deshabilitado

Tengo algunos controles que necesito deshabilitar cuando los usuarios no tienen privilegios de edición, pero a veces no son lo suficientemente amplios para mostrar el texto completo del elemento de opción seleccionado. En cuyo caso, he agregado una información sobre herramientas con ASP.NET y el siguiente código

ddl.Attributes.Add("onmouseover", "this.title=this.options[this.selectedIndex].title")

Esto funciona cuando el control está habilitado, pero no funciona cuando está deshabilitado.

La siguiente alerta no se activará cuando el mouse esté sobre el elemento seleccionado:

<select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
</select>

Mira esto violín.

q: ¿Puedo disparar el onmouseover evento para los controles que son disabled?

Los elementos deshabilitados no activan eventos, por ejemplo, los usuarios no pueden desplazarse o hacer clic en ellos para activar una ventana emergente (o información sobre herramientas). Sin embargo, puede envolver el elemento deshabilitado con un DIV y escuche el evento disparado en ese elemento en su lugar.

Actualizar: Consulte el comentario de Nathan William para conocer algunas limitaciones importantes de este enfoque. He actualizado el violín para ilustrar las áreas problemáticas con mayor claridad.

Ampliando lo que dijo @Diodeus, puede usar jQuery para crear automáticamente el div contenedor para usted y envuélvalo alrededor de los elementos deshabilitados.

1. Utilizar el :disabled selector para encontrar todos los elementos deshabilitados.
2. Entonces llame al .wrap() método con una función de devolución de llamada
3. Puedes usar this para referirse al elemento actual en el conjunto.
4. Entonces usa .attr() método para obtener el onmouseover valor del elemento principal y aplicar el mismo valor al nuevo div.

$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});

Demostración en jsFiddle

Sé que esta es una publicación anterior, pero espero que esta respuesta aclare cómo @Diodeus ¡La respuesta se puede implementar!

Los elementos deshabilitados no activan eventos, por ejemplo, los usuarios no pueden desplazarse o hacer clic en ellos para activar una ventana emergente (o información sobre herramientas). Sin embargo, como solución temporal, puede envolver un <DIV> o <span> alrededor del elemento deshabilitado y escuche el evento disparado en ese elemento en su lugar.

¡NOTA! Utilizando onmouseover y onmouseout en el envoltorio <DIV> no funcionará como se esperaba en Chrome (v69). Sin embargo, funcionará en IE. Es por eso que recomiendo a los usuarios que usen onmouseenter y onmouseleave en cambio, que funciona muy bien tanto en IE como en Chrome.

   <select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
  </select>

  <div onmouseenter="alert('hi');">
    <select disabled="disabled" onmouseover="alert('hi');">
      <option>Disabled with wrapper</option>
    </select>
  </div>

He reunido un violín JS con algunos ejemplos aquí: http://jsfiddle.net/Dr4co/tg6134ju/

Sé que esta es una publicación anterior, pero en Chrome puede configurar eventos de puntero de propiedad css para todos y debería permitir eventos. No he comprobado en otros navegadores.

button[disabled] {
  pointer-events: all;
}

Editar:

En realidad, creo que establecer la propiedad en automático es suficiente. Como comentó @KyleMit, el soporte es bastante bueno.

Solo usé esto en un proyecto donde necesitaba deshabilitar un botón hasta que se cumplieran algunas reglas de validación, pero también necesitaba activar la validación al pasar el mouse sobre el botón. Entonces, agregar los eventos de puntero funcionó. Creo que es la forma más fácil de superar el problema establecido en el OP.

¿Por qué no puede agregar un título en el elemento de destino? El título se parece a la información sobre herramientas. Y obras de título sobre elementos deshabilitados.

cuando establezca el valor de su selección, también establezca el título:

element.value=value;
element.title = element.options[element.selectedIndex].text;

hay dos soluciones para esto

<Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

o este si no quieres perderte la vista

<Tooltip title="Tooltip" placement="bottom">
  <IconButton component="div" disabled>
    <Done />
  </IconButton>
</Tooltip>

referencia