Share
I tooltip sono relativamente semplici da implementare semplicemente aggiungendo un po 'di markup al tuo codice HTML e impiegando un po' di CSS. Tuttavia, se non hai mai sentito parlare di attributi di dati HTML5, potresti voler controllare questo approccio alternativo (e molto più pulito).
Se hai seguito la serie Admin Bar, questo screencast dovrebbe finire bene. Se tu non hanno seguito, non preoccuparti; questo screencast ti insegnerà qualcosa che puoi usare in tutti i tipi di situazioni. Daremo un'occhiata ad un paio di opzioni per far funzionare i nostri tooltip.
Se, per qualche ragione pazzesca, preferiresti non guardarmi mostrare cose, di seguito sono un paio di frammenti da portare via e giocare con. Nota: questi sono esempi semplificati: potresti voler aggiungere prefissi del browser e stili aggiuntivi, ecc.
Il primo esempio utilizza marcature aggiuntive sotto forma di a dentro la nostra ancora Funziona perfettamente, ci consente di aggiungere un "punto" decorativo alla nostra descrizione comando, ed è attualmente l'opzione più sicura per la compatibilità del browser.
HTML:
Accentsconagua
Questo è il linkquesto è il consiglio! CSS:
a.tooltip span font-size: 10px; position: absolute; z-index: 999; white-space: nowrap; bottom: 9999px; a sinistra: 50%; background: # 000; color: # e0e0e0; imbottitura: 0px 7px; altezza della linea: 24px; altezza: 24px; opacità: 0; transizione: opacità 0.4s facilità di uscita; a.tooltip span :: before content: ""; blocco di visualizzazione; border-left: 6px solid # 000000; border-top: 6px trasparente solido; posizione: assoluta; inizio: -6px; a sinistra: 0px; a.tooltip: hover span opacity: 1; bottom: -35px;
Ecco l'esempio che pulisce il nostro markup, utilizza l'HTML5 dati-attributo per mantenere il valore del nostro tooltip, e il css ::prima pseudo-elemento per visualizzarlo. Molto più ordinato.
HTML:
Questo è il link
CSS:
a.tooltip :: before content: attr (data-tip); font-size: 10px; position: absolute; z-index: 999; white-space: nowrap; bottom: 9999px; a sinistra: 50%; background: # 000; color: # e0e0e0; imbottitura: 0px 7px; altezza della linea: 24px; altezza: 24px; opacità: 0; transizione: opacità 0.4s facilità di uscita; a.tooltip: hover :: before opacity: 1; bottom: -35px;
