Nascondere i tag del titolo al passaggio del mouse

Question

Ho esaminato le domande precedenti e nessuno di loro ha davvero funzionato per me, ho controllato su google e le informazioni che ho trovato sembrano piuttosto vaghe, quindi ho pensato di provare qui.

Qualcuno sa/o ha affrontato il problema dei tag del titolo visualizzati al passaggio del mouse. Ho una serie di link e immagini a cui verranno assegnati i tag del titolo, tuttavia, alcuni di essi mostreranno le informazioni che sarebbero meglio non apparire al passaggio del mouse.

Esiste una funzione globale che potrei utilizzare per applicare questo a tutti i tipi di tag del titolo? Un esempio potrebbe essere il seguente:

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

Se possibile vorrei disabilitare i "servizi dalle auto" titolo che appare al passaggio del mouse.

Grazie ancora.

Answer 1

Questo dovrebbe funzionare bene per disabilitare singolo titolo:

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

Se è necessario il titolo in seguito, è possibile ripristinarlo:

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

In questo modo non è generica però .. per avere è applicata a tutte le ancore, avere tale codice 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.

Edit: per applicare stesso per più tag (ad esempio <img>) prima spostare il nucleo del codice per una funzione:

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"); 
     }; 
    } 
} 

quindi modificare il codice per:

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

Answer 2

Si puo' t disabilitarli perché è una parte generica delle specifiche di browser/html. Ma sono consapevole che puoi modolarli usando css e javascript, quindi un display: nessuno dovrebbe essere in grado di essere usato da qualche parte.

sguardo here

Answer 3

Se il vostro ragionamento per usare il tag 'title' è per la conformità Aria, utilizzare al posto un'aria-label.

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

Answer 4

provare a impostare due titoli, uno vuoto che sarà scelto da browser come tooltip e poi quello che vi serve:

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

Answer 5

Anche se questa è già stata risolta in serie JS.

Ecco una soluzione 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 semplice alternativa è quella di usare i CSS sul contenitore delle immagini (il div o un):

pointer-events: none; 
cursor: default;