2009-10-07 8 views
13

C'è un modo per aumentare la durata di un suggerimento visualizzato con l'attributo title di un tag html?Come aumentare la durata di hover predefinita di <a> attributo titolo (suggerimento)

Attualmente in IE sembra avere solo una durata di circa 5 secondi e quindi scompare.

+0

possibile duplicato del [C'è un modo per avere l'attributo titolo di un elemento HTML da visualizzare per un tempo più lungo?] (Http://stackoverflow.com/questions/1245936/ is-there-a-way-to-have-the-title-attributo-di-un-html-elemento-a-display-per-al) – LordScree

risposta

19

Penso che questo dipenda dal sistema operativo e non dovresti provare a sovrascriverlo.

Il modo migliore sarà creare un suggerimento personalizzato.

Ecco alcuni buoni

jQuery Tooltip Plugin Demo

+1

+1 per essere completamente corretto. OP dovrebbe cercare una bella libreria di tooltip leggera, ci sono tonnellate. – timdev

+0

grazie! Non ero sicuro se fosse controllato dal sistema operativo se potesse in qualche modo essere impostato con css. – justinl

2

approfondire ulteriormente risposta phoenix'. I tooltip personalizzati ti permetteranno una grande flessibilità nel loro aspetto e layout. È necessario ottenere una libreria JavaScript (ad esempio, jquery o mootools) e ottenere un plug-in per visualizzarli. Quindi collegherai il file .js JQuery, quello del plugin e il css, infine aggiungerai del markup per farlo funzionare.

Ad esempio, questo: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ o questa: http://craigsworks.com/projects/simpletip/

Essi sono di solito abbastanza semplice da installare, l'unico requisito è che il vostro sito supporta javascript.

+0

questi sono fantastici! grazie: D – justinl

1

Prova WZ tooltip (non può più essere mantenuta): Click here

+0

Grazie per il link. Questa è un'alternativa semplice e veloce all'utilizzo di jQuery che potrei utilizzare. – justinl

0

Come aumentare la durata hover predefinita di attributo title (tooltip)

non uso IE, nessun limite di tempo nel browser Firefox. O usa il codice che ho fatto.

Ho creato codice in html/css solo in un file, non è stato possibile renderlo più semplice.

<!DOCTYPE html><html><body><style> 
 
.m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block} 
 
.m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #000;background-color:#eee;color:#000;min-width:300px} 
 
</style> 
 
<div class="m"> News   <span> Links inside span works good <a target="_blank" href="http://cnn.com">Cnn.com</a></span></div> 
 
<div class="m"> Hover over here and Information comes up <span> To make complex things easy is not so easy to do. </span></div> 
 
<br> Just som text here to give you the 3D effect <br> 
 
</body></html>

+0

Questa soluzione non funziona bene con i motori di ricerca e gli screen reader. – Samer

Problemi correlati