Ocultar etiquetas de título en hover

Question

He revisado las preguntas anteriores y ninguna de ellas me ha funcionado realmente, he comprobado que Google y la información que encontré parece bastante vaga, así que pensé que probaría aquí.

¿Alguien tiene conocimiento/o ha abordado el problema de las etiquetas de título que se muestran en el vuelo estacionario? Tengo una serie de enlaces e imágenes a los que se les asignarán etiquetas de título, sin embargo, algunos de ellos mostrarán información que sería mejor que no apareciera al pasar el mouse.

¿Existe una función global que pueda utilizar para aplicar esto a todo tipo de etiquetas de título? Un ejemplo sería el siguiente:

<a href="service.php" title="services for cars" /> 

Si es posible me gustaría desactivar los "servicios de los coches" title aparecen en vuelo estacionario.

Gracias de nuevo.

Answer 1

Esto debería funcionar bien para desactivar solo título:

<a href="service.php" title="services for cars" onmouseover="this.title='';" /> 

Si necesita el título después, puede restaurarlo:

<a href="service.php" title="services for cars" onmouseover="this.setAttribute('org_title', this.title'); this.title='';" onmouseout="this.title = this.getAttribute('org_title');" /> 

De esta manera no es genérico, aunque .. para tener se aplica a todos los anclajes, tener tal código JavaScript:

window.onload = function() { 
    var links = document.getElementsByTagName("a"); 
    for (var i = 0; i < links.length; i++) { 
     var link = links[i]; 
     link.onmouseover = function() { 
      this.setAttribute("org_title", this.title); 
      this.title = ""; 
     }; 
     link.onmouseout = function() { 
      this.title = this.getAttribute("org_title"); 
     }; 
    } 
}; 

Live test case.

Editar: aplicar misma para más etiquetas (por ejemplo <img>) mover primero el núcleo del código para una función:

function DisableToolTip(elements) { 
    for (var i = 0; i < elements.length; i++) { 
     var element = elements[i]; 
     element.onmouseover = function() { 
      this.setAttribute("org_title", this.title); 
      this.title = ""; 
     }; 
     element.onmouseout = function() { 
      this.title = this.getAttribute("org_title"); 
     }; 
    } 
} 

a continuación, cambiar el código para:

window.onload = function() { 
    var links = document.getElementsByTagName("a"); 
    DisableToolTip(links); 
    var images = document.getElementsByTagName("img"); 
    DisableToolTip(images); 
}; 

Answer 2

Usted puede' t desactivarlos porque es una parte genérica de la especificación browsers/html. Pero soy consciente de que puedes diseñarlos usando css y javascript, por lo que una pantalla: none correctamente debería poder usarse en alguna parte.

mirada here

Answer 3

Si su razonamiento para el uso de la etiqueta 'título' es para el cumplimiento Aria, Aria utilizar la etiqueta en su lugar.

<a href="service.php" aria-label="services for cars" /> 

Answer 4

intente configurar dos títulos, una vacía que será elegido por el navegador como información sobre herramientas y luego el que necesita:

<a href="service.php" title="" title="services for cars" /> 

Answer 5

Aunque esto ya ha sido contestada en la norma JS.

Aquí hay una solución jQuery.

$('a').hover( 
    function() { 
     $(this).attr("org_title", $(this).attr('title')); 
     $(this).attr('title', ''); 
    }, function() { 
     $(this).attr('title', $(this).attr("org_title")); 
    } 
); 

Answer 6

Una alternativa más sencilla es utilizar CSS en el contenedor de la imagen (el div o una):

pointer-events: none; 
cursor: default;