Ci sono molti tutorial online che discutono l'idea di tooltip basati su CSS. Tuttavia molti esempi richiedono elementi HTML insieme al collegamento di ancoraggio. I visitatori possono ottenere un messaggio di suggerimento di base utilizzando l'attributo titolo predefinito. Mi piacerebbe seguire questo metodo e aggiornare il processo solo un po '.
In questo tutorial voglio dimostrare come creare tooltips CSS3 che sono contestualmente basati su un attributo HTML5. Usando diverse classi possiamo incorporare schemi di colori unici insieme agli effetti di transizione CSS3. Questa tecnica non richiede alcun codice HTML extra a meno che non si allega il tooltip su un elemento diverso (come un campo di testo). Iniziamo!
Demo dal vivo - Scarica il codice sorgente
Iniziare
La pagina stessa è piuttosto noiosa, quindi voglio concentrarmi principalmente sul codice CSS. Ogni link di ancoraggio viene fornito un suggerimento basato sulla classe .tooltip. Utilizzando la sintassi dei dati HTML5 Sto tirando il testo da un attributo chiamato Dati-tool.
È meglio evitare il titolo attributo poiché questo mostrerà un altro suggerimento basato su browser in cima al CSS. Possiamo cambiare la direzione di ogni suggerimento con classi aggiuntive sul link di ancoraggio. Un'altra classe .animare applicherà anche le transizioni all'effetto.
La mia idea originale è partita da questo tutorial che utilizza un blocco di codice cluster più grande. Sfortunatamente l'autore suggerisce di usare alt text per il titolo del tooltip, ma alt non può essere collocato sui link di ancoraggio. Così ho riorganizzato i suggerimenti e aggiornato per un codice HTML5 / CSS3 più pulito.
Costruire il suggerimento
Il punto migliore da cui iniziare è guardare il codice generico prima che qualsiasi cosa debba apparire sulla pagina. I link di ancoraggio possono essere utilizzati :dopo e :prima pseudo-elementi da applicare usando i CSS. Ciò consente agli sviluppatori di personalizzare un po 'di contenuto prima e dopo qualsiasi elemento applicabile. In questo caso creerò un tooltip triangolare insieme a una finestra a bolle separata.
Il collegamento dell'ancora stesso è posizionato relativamente in modo che gli pseudo-elementi possano essere applicati utilizzando il posizionamento assoluto. Questo rende più facile montare la bolla e il triangolo insieme in un suggerimento. visibility: hidden manterrà la punta fuori dalla vista dell'utente fino a quando non rileverà specificamente un link. In caso contrario, il suggerimento è hoverable ma si trova allo 0% di opacità.
Noterai che lo sfondo predefinito usa un traslucido RGBA () ambientazione. : before contiene il codice triangolo while: after contiene la bolla del tooltip e il testo con la proprietà contenuto: attr (data-tool).
Noterai in fondo al mio esempio di codice che aggiorniamo la posizione ogni volta che un utente si posiziona sul link di ancoraggio. Questa posizione cambierà per ciascuna posizione del tooltip separato insieme agli stili di bordo per la freccia.
Classi di posizione
Puoi applicare una classe extra al link di ancoraggio per forzare una determinata posizione del tooltip. Il default appare in cima al testo e le altre classi lo sono .destra, .sinistra, e .parte inferiore.
La posizione in basso utilizza i pixel insieme alla posizione superiore predefinita. Ma volevo anche dimostrare come applicare gli stili usando le percentuali sulle descrizioni a sinistra / a destra.È meglio attenersi a un'unità simile al testo del paragrafo in modo che tutto rimanga proporzionato.
Le percentuali sono spesso necessarie per il posizionamento orizzontale poiché non sempre conosciamo la larghezza del pixel di un collegamento. Gli EM scalabili sono un'altra scelta quando si ha a che fare con i font, ma il posizionamento può essere complicato.
Le uniche altre modifiche oltre alla posizione sono le larghezze e i colori dei bordi. Questo viene applicato al :prima elemento perché sta prendendo di mira ogni triangolo. La posizione determina come appare il triangolo e quale lato della bolla deve apparire.
Stili CSS aggiuntivi
I due snippet di classe extra servono per ricolorare i suggerimenti e utilizzare effetti animati sul display.
I codici di classe dei colori sono molto semplici ma anche densi e ripetitivi. Questo blocco di codice è per una singola tavolozza di colori blu. Il suggerimento :dopo il selettore è necessario solo una volta per aggiornare lo sfondo della bolla. Abbiamo bisogno di 4 selettori per ogni freccia in relazione alle 4 posizioni del suggerimento.
I colori devono essere applicati su diversi bordi per diverse posizioni del triangolo. Fortunatamente è molto semplice copiare / incollare e aggiornare con la tua combinazione di colori.
Dal momento che la bolla del suggerimento e il triangolo possono essere animati insieme, ho scritto un selettore per entrambi. Usano lo stesso stile di animazione per mantenere tutto fluido. Tutto quello che devi fare è aggiungere il .animare classe su qualsiasi collegamento di ancoraggio tooltip.
Collegamento ad altri elementi
L'ultima parte di questo tutorial spiega come usare queste descrizioni per elementi che non hanno alcun supporto pseudo prima / dopo. Il selettore fratello adiacente è importante in relazione al suggerimento - sentiti libero di cambiare questo codice se hai bisogno di indirizzare elementi più specifici.
Noterai che la maggior parte delle proprietà è molto simile a prima. Continuiamo a estrarre il contenuto dallo strumento dati e i suggerimenti vengono visualizzati solo quando un utente si concentra su un campo di input. Il .fieldtip la classe può essere aggiunta a qualsiasi elemento. Ho scelto uno span come vedrai nel mio HTML:
Inoltre con questi tooltip esterni ho mantenuto le proprietà di animazione allegate. Potresti provare a cambiare le cose con un colore, una dimensione del carattere o un numero qualsiasi di proprietà CSS aggiuntive.
Demo dal vivo - Scarica il codice sorgente
Chiusura
Ritengo che questi tooltip forniscano un eccellente modello di partenza per la personalizzazione. Puoi rimuovere o modificare qualsiasi proprietà per ottenere diversi colori di sfondo, stili di animazione o triangoli basati su immagini. Tieni presente che sia gli effetti animati che i triangoli CSS possono apparire buggati nei browser più vecchi. Prova a scaricare una copia del mio codice e guarda cosa puoi costruire per i tuoi progetti.