2011-09-19 9 views
5

Abbiamo codificato semplici tooltip nel nostro sito Web per un po ', e ci siamo resi conto che potevamo realizzare la stessa cosa semplicemente usando l'attributo "titolo". Qualche ragione per cui non dovremmo usare l'attributo title come tooltip? Ci sono dei browser che non supportano questa funzione? (w3schools sembra indicare che tutti i principali browser supportano questo.)Posso dipendere dall'attributo del titolo visualizzato come suggerimento?

risposta

1

Tutti i principali browser supportano title. Ma allora non hai la capacità di mostrare questo tipo di tooltips personalizzati: http://www.dreamcss.com/2009/03/list-of-25-javascriptajax-css-tooltip.html

Hai visto Utenti hover card su SO (questo sito)? Se hanno usato il titolo, potrebbe non essere possibile mostrare un suggerimento così meraviglioso.

+0

Grazie per il suggerimento :) Abbiamo un tooltip più sofisticato per quando ne abbiamo bisogno. Avevamo solo bisogno di qualcosa per alcuni tooltip molto semplici e figurati invece di codificarlo potremmo usare l'attributo title – froadie

+0

@Froadie: Sì per semplici suggerimenti (principalmente di una riga) non è necessario utilizzare suggerimenti personalizzati. Puoi usare il titolo per questo. –

0

Tutti i browser principali supportano effettivamente i suggerimenti, quindi sentitevi liberi di utilizzare l'attributo title per loro. Ti informerò che fornisci anche un attributo alt per rispecchiare il titolo per motivi di accessibilità (principalmente per utenti ipovedenti e non vedenti) e tolleranza agli errori (ad esempio se l'immagine non riesce a caricare o se l'utente sta utilizzando un utente che blocca l'immagine agente da una connessione lenta).

0

E 'veramente lento di presentarsi (1s o 2 su Chrome) e dubito che gli utenti di internet moderni hanno che molta pazienza in attesa che da mostrare.

È possibile utilizzare plug-in o codice hardware di terze parti (ciò che faccio la maggior parte del tempo) utilizzando gli eventi "mouseenter" e "mouseleave" di jQuery. codice fittizio, come di seguito: html:

<button id="button-awesome">Awesome</button> 
 

 
<div class="tooltip" style="display:none"> 
 
This is a button 
 
</div>

JavaScript/jQuery:

$('#button-awesome').on('mouseenter', function() { 
 
    show Tooltip // toggle, or slideToggle, or .css("display","block") or .removeClass('hidden') 
 
}).on('mouseleave', function() { 
 
    // undo what you've just done. 
 
});

0

fare attenzione quando si tratta di browser mobile. Per lo più non è supportato lì.

Problemi correlati