È possibile nascondere il titolo da un collegamento con CSS?

Question

Ho un elemento di ancoraggio con un attributo titolo. Voglio nascondere il popup che appare quando ci si passa sopra con il mouse nella finestra del browser. Nel mio caso, non è possibile fare qualcosa di simile,

$("a").attr("title", ""); 

A causa di jQuery Mobile titolo riappare dopo si verificano determinati eventi (in pratica ogni volta che l'elemento di ancoraggio viene ridisegnato). Quindi spero di nascondere il titolo tramite CSS.

Qualcosa di simile:

a[title] { 
    display : none; 
} 

non funziona, dal momento che nasconde l'intero elemento di ancoraggio. Voglio nascondere solo il titolo. È possibile? Il popup non dovrebbe essere visualizzato.

Answer 1

Con i CSS non è possibile dal momento che con i CSS è possibile solo aggiunge contenuti per DOM (tipicamente con :before :after e content: '...';, senza rimuoverlo o modificare gli attributi.

L'unico modo è quello di creare un evento live personalizzato (es . "change-something"):

$("a").on("change-something", function(event) { this.removeAttr("title"); });

e attivare a ogni cambiamento:

... $("a").trigger("change-something");

Maggiori informazioni e demo qui:

http://api.jquery.com/trigger/
http://api.jquery.com/removeAttr/

Answer 2

EDIT Come da @ di boltClock suggerimento, io dico non mi sento che una soluzione CSS è appropriato qui, come il il browser decide cosa fare con l'attributo titolo di un collegamento, o qualcosa del genere. Il CSS, per quanto ne so, non è in grado di gestire questo problema. Come accennato, l'uso di jquery per sostituire il titolo con una stringa vuota non funzionerà perché jquery mobile li riscrive in alcuni punti. Questo, tuttavia, funzionerà indipendentemente da JQM e non implica la rimozione completa dell'attributo titolo che è SEO importante.

Questo funziona:

$('a["title"]').on('mouseenter', function(e){ 
    e.preventDefault(); 
}); 

speranza che questo aiuti.

EDIT Ho cambiato il mio codice iniziale di $ ('body'). On ('mouseenter') a questo dopo il test. questo è confermato per funzionare.

Answer 3

tenta di modificare il codice utilizzando questo

$(document).ready(function() { 
    $("a").removeAttr("title"); 
}); 

questo rimuoverà attributo title così l'etichetta suggerimento non sarà visualizzato quando hover sul link

Answer 4

Utilizzando il seguente proprietà CSS farà in modo che la testo dell'attributo titolo non vengono visualizzati su hover:

pointer-events: none; 

Tenete a mente che JS è una soluzione migliore dal momento che questa proprietà CSS farà in modo che l'elemento i Non è mai il bersaglio di alcun evento del mouse.

Answer 5

È possibile avvolgere il testo interno in uno span e assegnare un attributo titolo vuoto.

<a href="" title="Something" class=".some-tooltip-class"><span title="">Your text</span></a>