Share
I tooltip sono un ottimo modo per migliorare l'interfaccia utente quando gli utenti hanno bisogno di un contesto extra per quell'icona di fantasia, o quando vogliono un po 'di sicurezza per fare clic su un pulsante, o magari una didascalia di Easter Egg per accompagnare un'immagine. Facciamo alcuni tooltip animati, proprio ora, con nient'altro che HTML e CSS.
Ecco a cosa stiamo lavorando:
Prima di immergerci nel calderone, diamo uno sguardo a cosa stiamo effettivamente preparando. L'obiettivo principale è avere un modo semplice per aggiungere un suggerimento, quindi lo faremo aggiungendo una custom tooltip attributo:
Accentsconagua
testo o icona visibile, ecc.Se stai cercando tooltip compatibili con 508 o hai bisogno di tooltip più intelligenti con rilevamento delle collisioni del contenitore e / o supporto per contenuti HTML rispetto a testo normale, ci sono molte soluzioni che usano script di terze parti per risolvere quei bisogni per te.
"JavaScript è fondamentale per creare componenti interattivi completamente accessibili." - Sara Soueidan, Costruire un tooltip di aiuto completamente accessibile ... è più difficile di quanto pensassi
Questo tutorial non affronta specificamente le esigenze di accessibilità. Conosci i tuoi utenti e di cosa hanno bisogno, quindi assicurati di considerare anche le loro esigenze in questo senso.
Oh, aspetta. Abbiamo un asterisco da affrontare per primo, sul "non aver bisogno di alcun ricarico extra". Questa è la magia, dopo tutto. I nostri tooltip no veramente bisogno di qualsiasi elemento DOM extra dato che sono completamente realizzati pseudo-elementi (il ::prima e ::dopo cose) che possiamo controllare tramite CSS.
Se stai già utilizzando gli pseudo-elementi di un elemento di un altro set di stili e vuoi un suggerimento su quell'elemento, potresti dover ristrutturare un poco po.
Aspettare. Gremlins! Ancora un avvertimento: Posizionamento CSS. Affinché i tooltip funzionino correttamente, il loro elemento genitore (la cosa a cui stiamo allegando il tooltip) deve essere
posizione: relativa, oposizione: assoluta, oposizione: fissaFondamentalmente, qualsiasi cosa diversa da posizione: statica - questa è la modalità di posizione predefinita assegnata a quasi tutti gli elementi dal browser. I tooltip sono posizionati in modo assoluto e quindi hanno bisogno di conoscere i limiti in cui la loro assolutezza ha un significato. La direttiva di posizione predefinita statico non dichiara i propri limiti e non darà ai nostri tooltips un contesto contro cui fare push, quindi i tooltip useranno l'elemento parentale più vicino che ha un limite dichiarato.
Avrai bisogno di decidere quale direttiva di posizione funziona meglio con il modo in cui stai usando i tooltip. Questo tutorial presume posizione: relativa per l'elemento genitore. Se l'interfaccia utente si basa su un elemento posizionato in modo assoluto, potrebbe essere necessario eseguire alcune ristrutturazioni (extra markup) per distribuire un suggerimento su quell'elemento.
Entriamo e vediamo cosa succede.
La maggior parte delle regole CSS sono scritte con nomi di classi in mente, come .questa cosa, ma i CSS hanno una manciata di tipi di selettori. I nostri tooltip magici useranno selettori di attributi: questa è la notazione della parentesi quadra:
[foo] background: rgba (0, 0, 0, 0.8); colore: #fff;
Quando il browser incontra qualcosa del genere:
Controlla!saprà che ha bisogno di applicare il [Pippo] regole perché quello il tag ha un attributo chiamato foo. In questo caso, lo span stesso avrebbe uno sfondo nero traslucido con testo bianco.
Gli elementi HTML hanno vari attributi incorporati, ma possiamo anche crearne uno nostro. Piace foo, o tooltip. Di default, HTML non sa cosa significano, ma con i CSS possiamo dire a HTML cosa significa.
Utilizzeremo i selettori di attributo principalmente per una separazione delle preoccupazioni. L'uso di attributi su nomi di classe non ci consente di ottenere punti bonus nelle guerre di specificità; le classi e gli attributi hanno la stessa specificità. Tuttavia, utilizzando gli attributi possiamo mantenere il nostro contenuto con il contenuto in quanto gli attributi HTML possono avere valori, mentre i nomi di classe no.
Considera il nome della classe .tooltip contro l'attributo [Tooltip] in questo codice di esempio. Il nome della classe è uno dei valori per l'attributo [classe] mentre l'attributo tooltip ha un valore, che è il testo che vogliamo mostrare.
lorem ipsum lorem ipsum
I nostri tooltip utilizzeranno due attributi diversi:
tooltip: questo contiene il contenuto del tooltip (una stringa di testo semplice)flusso: opzionale; questo ci permette di controllare come esporre il suggerimento. Esistono molti posizionamenti che potremmo supportare, ma copriremo quattro posizionamenti comuni:Ora, impostiamo il lavoro di base per tutti i tooltip. Le regole dei passaggi 1-5 si applicano a tutti i suggerimenti, indipendentemente da cosa flusso noi li diamo. I passaggi 6-7 hanno distinzioni tra i vari flusso valori.
Questo è per l'elemento genitore del tooltip. Assegniamo una direttiva di posizione in modo che il posizionamento assoluto delle parti del tooltip (il ::prima e ::dopo pseudo-elementi) sono posizionati nel contesto di questo elemento padre e non nel contesto dell'elemento di pagina grande o di un nonno o di qualche altro elemento esterno sull'albero DOM.
[tooltip] position: relativo;
È tempo di innescare gli pseudo-elementi. Qui imposteremo proprietà comuni a entrambi ::prima e ::dopo pezzi. Il soddisfare la proprietà è ciò che effettivamente fa funzionare uno pseudo-elemento, ma ci arriveremo presto.
[tooltip] :: before, [tooltip] :: after line-height: 1; selezione utente: nessuna; pointer-events: none; posizione: assoluta; display: nessuno; opacità: 0; / * opinioni * / trasformazione del testo: nessuna; font-size: .9em;
Non so perché "Dink" abbia senso, l'ho sempre chiamato così. Questa è la piccola parte a triangolo che dà i loro suggerimenti fumetto sentire puntando la cosa che lo ha invocato. Notiamo che stiamo usando trasparente per il colore del bordo; aggiungiamo il colore in un secondo momento, poiché il modo in cui lo aggiungiamo dipende dai suggerimenti flusso.
[tooltip] :: before content: "; z-index: 1001; border: 5px solid transparent;
Non è un refuso che il soddisfare:"; dichiarazione ha una stringa vuota per un valore. Non vogliamo nulla, ma abbiamo bisogno che la proprietà per lo pseudo-elemento esista.
Per creare un triangolo stiamo definendo un bordo solido con un certo spessore su una scatola vuota (nessun contenuto) senza larghezza e senza altezza e dando solo un lato del riquadro a un colore di bordo. Per maggiori dettagli consulta il seguente tutorial:
Ecco la carne della cosa. Notare il contenuto: attr (tooltip) parte dicendo: "Questo pseudo-elemento dovrebbe usare il valore di tooltip attributo come suo contenuto. "Questo è il motivo per cui l'uso di attributi su nomi di classi è così grande!
[tooltip] :: after content: attr (tooltip); /* Magia! * / z-index: 1000; / * la maggior parte del resto è opinione * / font-family: Helvetica, sans-serif; allineamento del testo: centro; / * Consenti al contenuto di impostare la dimensione dei tooltip, ma questo inoltre impedirà loro di essere odiosi * / min-width: 3em; larghezza massima: 21em; white-space: nowrap; overflow: nascosto; overflow del testo: ellissi; / * design visibile delle bolle del tooltip * / padding: 1ch 1.5ch; border-radius: .3ch; box-shadow: 0 1em 2em -.5em rgba (0, 0, 0, 0,35); sfondo: # 333; colore: #fff;
Notare il z-index valori sia per il dink che per la bolla. Questi sono valori arbitrari, ma tieni presente che a z-index il valore è relativo. Significato: un valore z-index di 1001 all'interno di un elemento con uno z-index di 3 significa solo che l'elemento 1001 sarà l'elemento più in alto dentro quello z-index: 3 contenitore.
La bolla z-index dovrebbe essere almeno un gradino più in basso rispetto al tino z-index. Se è uguale o superiore al Dink, si può finire con un effetto di colorazione incoerente sul Dink se i tuoi tooltip impiegano un box-ombra.
Per una visione più dettagliata della proprietà z-index, dai un'occhiata al seguente tutorial:
I nostri tooltip vengono attivati passando il mouse sopra l'elemento con il tooltip ... Quasi.
[tooltip]: hover :: before, [tooltip]: hover :: after display: block;
Se guardi indietro al nostro blocco di stile nel passaggio 2, dovresti vedere che abbiamo usato opacità: 0; insieme a display: nessuno; per le nostre parti tooltip. Lo abbiamo fatto in modo da poter utilizzare gli effetti di animazione CSS quando i tooltip mostrano e nascondono.
Il display la proprietà non può essere animata, ma opacità può! Ci occuperemo delle animazioni per ultime. Se non ti interessa i tooltip animati, cancella semplicemente il opacità: 0; dichiarazione dal passaggio 2 e ignorare l'animazione nel passaggio 7.
L'ultima cosa di cui avremo bisogno si applica ancora a tutti i tooltip è un modo per sopprimere un suggerimento se non ha contenuto. Se stai compilando tooltip con qualche sorta di sistema dinamico (Vue.js, Angular, o React, PHP, ecc.) Non vogliamo bolle sciocche!
/ * non mostra descrizioni comandi vuote * / [tooltip = "] :: before, [tooltip ="] :: after display: none! important;
Questo passaggio può diventare piuttosto complicato poiché utilizzeremo alcuni selettori non molto comuni per aiutare i nostri tooltip a gestire i loro posizionamenti in base alle loro flusso valori (o la mancanza di ciò).
"Strane cose sono in corso al Circle-K." - Ted Theodore Logan
Prima di saltare agli stili, diamo un'occhiata ad alcuni modelli di selettori che useremo.
[tooltip]: not ([flow]) :: before, [tooltip] [flow ^ = "up"] :: before / * ... properties: values ... * /
Questo sta dicendo al browser: "Per tutti gli elementi con a tooltip attributo sia non avere un flusso attributo o ha un flusso con un valore che inizia con 'su': applica questi stili al suo ::prima pseudo-elemento.”
Qui stiamo usando un pattern in modo che questi possano essere estesi ad altri flussi senza dover ripetere così tanti CSS. Questo modello flusso ^ = "up" sta usando il ^ = (inizia con) matcher. Questo consente agli stili di applicare anche a in alto a destra e in alto a sinistra dovresti voler aggiungere quei controlli di flusso. Non li copriremo qui, ma puoi vederli in uso sulla mia demo tooltip originale su CodePen.
Ecco i blocchi CSS per tutti e quattro i flussi coperti da questo tutorial.
/ * SOLO il :: before * / [tooltip]: not ([flow]) :: before, [tooltip] [flow ^ = "up"] :: before bottom: 100%; border-bottom-width: 0; border-top-color: # 333; / * SOLO il :: after * / [tooltip]: not ([flow]) :: after, [tooltip] [flow ^ = "up"] :: after bottom: calc (100% + 5px); / * Both :: before & :: after * / [tooltip]: not ([flow]) :: before, [tooltip]: not ([flow]) :: after, [tooltip] [flow ^ = "su "] :: before, [tooltip] [flow ^ =" up "] :: after left: 50%; transform: translate (-50%, -.5em);
[tooltip] [flow ^ = "down"] :: before top: 100%; border-top-width: 0; border-bottom-color: # 333; [tooltip] [flow ^ = "down"] :: after top: calc (100% + 5px); [tooltip] [flow ^ = "down"] :: before, [tooltip] [flow ^ = "down"] :: after left: 50%; transform: translate (-50%, .5em);
[tooltip] [flow ^ = "left"] :: before top: 50%; border-right-width: 0; border-left-color: # 333; a sinistra: calc (0em - 5px); transform: translate (-. 5em, -50%); [tooltip] [flow ^ = "left"] :: after top: 50%; a destra: calc (100% + 5px); transform: translate (-. 5em, -50%);
[tooltip] [flow ^ = "right"] :: before top: 50%; border-left-width: 0; border-right-color: # 333; a destra: calc (0em - 5px); transform: translate (.5em, -50%); [tooltip] [flow ^ = "right"] :: after top: 50%; a sinistra: calc (100% + 5px); transform: translate (.5em, -50%);
Le animazioni sono fantastiche. Le animazioni possono:
I nostri tooltips rientrano in quest'ultima descrizione. Piuttosto che far esplodere una bolla di testo e scoppiare in un lampo, facciamoli più morbido.
Ne avremo bisogno due @keyframe animazioni. I suggerimenti su / giù useranno il tooltip-vert keyframe e i tooltips sinistro / destro useranno il tooltip-HORZ fotogramma chiave. Nota in entrambi questi fotogrammi chiave definiamo solo lo stato finale desiderato dei tooltip. Non abbiamo bisogno di sapere dove vengono a partire dal (i tooltip stessi hanno quell'informazione di stile). Vogliamo solo controllare dove vanno a.
@keyframes tooltips-vert to opacity: .9; transform: translate (-50%, 0); @keyframes tooltips-horz to opacity: .9; transform: translate (0, -50%);
Ora, abbiamo bisogno di applicare questi keyframe alle descrizioni dei comandi quando un utente si posiziona sugli elementi di attivazione (gli elementi con [Tooltip] attributi). Dal momento che stiamo impiegando vari flussi per controllare il modo in cui i tooltip mostreranno, dobbiamo identificare queste possibilità negli stili.
[tooltip]: not ([flow]): hover :: before, [tooltip]: not ([flow]): hover :: after, [tooltip] [flow ^ = "up"]: hover :: before, [ tooltip] [flow ^ = "up"]: hover :: after, [tooltip] [flow ^ = "down"]: hover :: before, [tooltip] [flow ^ = "down"]: hover :: after animazione: tooltips-vert 300ms in uscita in avanti; [tooltip] [flow ^ = "left"]: hover :: before, [tooltip] [flow ^ = "left"]: hover :: after, [tooltip] [flow ^ = "right"]: hover :: prima, [tooltip] [flow ^ = "right"]: hover :: after animation: tooltips-horz 300ms eas-out forward;
Ricorda che non possiamo animare il display proprietà, ma possiamo dare un effetto di dissolvenza manipolando il tooltip opacità. Stiamo anche animando la proprietà di trasformazione che dà ai suggerimenti un movimento sottile come se volassero dentro per indicare i loro elementi di attivazione.
Notare il in avanti parola chiave nella dichiarazione di animazione. Questo dice all'animazione di non resettare una volta completato, ma di procedere in avanti e rimanere alla fine.
Lavoro fantastico! Abbiamo parlato molto in questo tutorial e ora abbiamo una raccolta accurata di tooltip da mostrare per il nostro duro lavoro:
Abbiamo solo scalfito la superficie di ciò che può essere fatto con i tooltips CSS. Divertiti a giocare con loro e continua a sperimentare e ad elaborare le tue ricette!
