30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. CSS
Webdesign

Come fare un magico, animato Tooltips con CSS

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Marco Calcanti (you can also view the original English article)

Tooltips sono un ottimo modo per migliorare un'interfaccia utente quando gli utenti necessitano di alcuni contenuti aggiuntivi per quell'icona fantastica o quando vogliono qualche rassicurazione per cliccare su un pulsante, o forse una didascalia da mettere insieme con un'immagine. Facciamo alcune tooltips animate, ora, con HTML e CSS.

Demo

Ecco ciò che andremo a fare:

Prima di essere immersi nel calderone, diamo un'occhiata a cosa stiamo effettivamente fabbricando. L'obiettivo principale è di avere un modo semplice per aggiungere una tooltip, in cosicche lo faremo con l'aggiunta di un attributo tooltip personalizzato:

Una nota su accessibilità e capacità

Se stai cercando 508-compatibili tooltips, o necessiti di più eleganti tooltips con rilevamento delle collisioni di contenitore e/o supporto per il contenuto HTML vs testo normale, ci sono un sacco di soluzioni che utilizzano script di terze parti per risolvere tali esigenze per te.

"JavaScript è essenziale per rendere pienamente accessibili componenti interattivi." – Sara Soueidan, costruendo un tooltip completamente accessibile di aiuto... è più difficile di quanto pensassi

Questo tutorial non risponde specificamente ad esigenze di accessibilità. Sai gli utenti di cosa hanno bisogno, quindi assicurati di considerare le loro esigenze anche a questo proposito.

Impostiamo alcune aspettative

  • No JavaScript richiesto
  • Useremo i selettori di attributo (no classnames), con corrispondenza dei modelli built-in CSS
  • Aggiungere elementi DOM esistenti (nessun nuovo elemento richiesto nel vostro markup*)
  • Esempi di codice sono prefix-free (aggiungere prefissi vendor per browser di destinazione, se necessario)
  • Si presuppone di mouseover/hover per attivare le tooltips
  • Solo tooltips di testo normale (HTML, immagini, ecc non sono supportati)
  • Animazioni dei sottotitoli mentre si invocano le tooltips

Va bene! Andiamo sul difficile!

Oh, aspetta. Abbiamo un asterisco da gestire prima, circa "non necessitano di alcun markup extra". Questa è magia, dopo tutto. Le nostre tooltips non hanno realmente bisogno di eventuali elementi DOM supplementari su come sono costituiti completamente dagli pseudo-elementi (il ::before e ::after) che possiamo controllare tramite CSS.

Se si stanno già utilizzando gli pseudo-elementi di un elemento da un altro set di stili e si desidera una tooltip su quell'elemento, è necessario ristrutturare un pò.

Non c'è nessuna festa come un festa di Tooltip!

Attendere. Gremlins! Un altro avvertimento: posizionamento CSS. Perchè le tooltips funzionino correttamente, il relativo elemento padre (la cosa a cui stiamo associando la tooltip) deve essere

  • position: relative, o
  • position: absolute, o
  • position: fixed

In sostanza, qualcosa di diverso da position: static — che è la modalità di posizione predefinita assegnata praticamente a tutti gli elementi dal browser. Le tooltips sono posizionate in modo assoluto e quindi hanno bisogno di conoscere i confini in cui la loro assolutezza ha significato. La direttiva di posizione predefinito static non dichiara i propri confini e non darà ai nostri tooltips un contesto contraddittorio, quindi le tooltips utilizzeranno il successivo elemento parentale più vicino che ha un limite dichiarato.

È necessario decidere quale direttiva di posizione funziona meglio con quanto si sono utilizzando le tooltips. Questa esercitazione si presuppone position: relative per l'elemento padre. Se l'interfaccia utente si basa su un elemento posizionato in modo assoluto, poi alcune ristrutturazioni (markup extra) può anche essere necessaria per distribuire una tooltip su quell'elemento.

Andiamo a vedere cosa succede.

Selettori di attributo; Un aggiornamento rapido

La maggior parte delle regole CSS sono scritte con nomi di classi a memoria, come .this-thing,  ma il CSS ha una manciata di tipi di selettori. i nostri tooltips magici andranno a utilizzare i selettori di attributo–quale è la notazione parentesi quadrata:

Quando il browser incontra qualcosa come questo:

Si saprà della necessità di applicare la regola [foo] perchè lo <span> tag ha un attributo nominato foo. In questo caso, lo span stesso avrebbe uno sfondo traslucido nero con testo bianco.

Gli elementi HTML hanno vari attributi nativi, ma possiamo anche crearceli da soli. Come foo, o tooltip. Di default, HTML non sa cosa significano queste cose, ma con CSS possiamo dire a HTML cosa significa.

Perché i Selettori di attributo?

Useremo i selettori di attributo principalmente per una separazione di interessi. Utilizzando gli attributi sopra i classnames non ci porta alcun bonus nello specifico; classi e attributi hanno la stessa specificità. Tuttavia, utilizzando gli attributi possiamo mantenere il nostro contenuto con il contenuto come gli attributi HTML possono avere dei valori, mentre classnames non lo fanno.

Considera la classname .tooltip vs. l'attributo [tooltip] in questo codice di esempio. La classname è uno dei valori per l'attributo [class] mentre l'attributo tooltip ha un valore, quale è il testo che vogliamo visualizzare.

Ora entrando in alchimia Tooltip

I nostri tooltips useranno due attributi differenti:

  • tooltip: questo contiene il contenuto della tooltip (una stringa di testo normale)
  • flow: opzionale, questo permette a noi di controllare come esporre la tooltip. Ci sono molti posizionamenti che potremmo supportare ma andremo a coprire quattro posizionamenti comuni.
    su, sinistra, destra, giù.

Ora, impostiamo il lavoro di base per tutte le tooltips. Le regole dai passaggi da 1 a 5 si applicano a tutte le tooltips indipendentemente dal flow che diamo a loro. I passaggi 6–7 sono distinzioni tra i vari valori di flow.

1. Relatività

Questo è per l'elemento genitore della tooltip. Assegnamo una posizione direttiva cosicchè il posizionamento assoluto delle parti tooltip (gli pseudo-elementi  ::before e ::after)  sono posizionati nel contesto dell'elemento genitore e non nel contesto della pagina in libertà o un elemento gran genitore o altri elementi esterni all'albero del DOM.

2. pseudo-elemento Primo Tempo

È il momento di rilevare gli pseudo-elementi. Qui imposteremo le proprietà comuni a entrambi i ::before e ::after pezzi. La proprietà content è ciò che rende effettivamente uno pseudo-elemento funzionante, ma ci arriveremo presto.

3. il Dink

Non so che senso abbia "dink", ho sempre chiamato così. Questa è la parte a punta di un piccolo triangolo che dà le tooltips la loro bolla di discorso sentire puntando verso la cosa che ha richiamato. Si noti che stiamo usando trasparent per il colore del bordo; Abbiamo ', ll aggiungere il colore più tardi come aggiungere dipende flow tooltips.

Non si tratta di un errore di battitura che la dichiarazione content: '';  è una stringa vuota per un valore. Noi non vogliamo niente lì, ma abbiamo bisogno di quella proprietà perchè esista lo pseudo-element.

Per fare un triangolo stiamo definendo un border solid con qualche spessore su una casella vuota (nessun contenuto) con nessuna larghezza e nessuna altezza e dando solo un lato della finestra di un colore del bordo. Per ulteriori dettagli consulta il seguente tutorial:

4. bolle!

Qui è il succo della cosa. Si noti il content:attr(tooltip) parte dicendo: "questo pseudo-elemento deve utilizzare il valore dell'attributo tooltip come contenuto". Ecco perché utilizzando gli attributi sopra classnames è così bello!

Notare i valori di z-index per sia il dink e la bolla. Questi sono valori arbitrari, ma tenete a mente che un valore z-index è relativo. Significato: un valore z-index di 1001 all'interno di un elemento con un z-index di 3 significa solo che l'elemento 1001 sarà l'elemento più in alto all'interno di quello z-indice: contenitore 3.

La bolla z-index dovrebbe essere almeno un passo sotto dallo z-index del dink. Se è lo stesso o più alto del dink, puoi completarlo con una sfumatura colorata se la tua tooltip impiega un box-shadow.

Per uno sguardo più dettagliato alla proprietà z-index, date un'occhiata al seguente tutorial:

Azione Interazione

Le nostre tooltips vengono attivate facendo passare il mouse sopra l'elemento con la tooltip ... Quasi.

Se si guarda indietro al nostro stile di blocco nel passaggio 2, si dovrebbe vedere che abbiamo usato opacity: 0; insieme a display: none; per la nostra parte di tooltip. Lo abbiamo fatto in modo che possiamo usare gli effetti di animazione CSS in cui i tooltip si mostrano e nascondono.

La proprietà display non può essere animata, ma opacity sì! Gestiremo le animazioni per ultimo. Se non ti curi delle tooltips animate, cancella la dichiarazione opacity: 0; dallo Step 2 e ignora l'animazione nello Step 7.

L'ultima cosa di cui abbiamo bisogno che si applica ancora a tutte le tooltips è un modo per sopprimere una tooltip se non ha contenuti. Se si popolano tooltip con una sorta di sistema dinamico (Vue.js, Angular, o React, PHP, ecc), non vogliamo stupide bolle vuote!

Flow Control

Questo passaggio può essere piuttosto complicato dal momento che useremo selettori meno comuni per aiutare le tooltips ad essere posizionate in base ai loro valori flow (o mancanza)

"Strane cose sono in corso al Circolo-K." - Ted Theodore Logan

Prima di addentrarsi negli stili, diamo uno sguardo ad alcuni modelli di selettore che useremo.

Questo dice al browser: "Per tutti gli elementi con l'attributo tooltip che non hanno anche l'attributo flow, o hanno un flow che ha come valore iniziale 'up': applica questi stili ai loro pseudo-elementi ::before."

Stiamo usando un esempio qui in modo che possono essere estesi agli altri flows senza il bisogno di ripetere così tanti CSS. Questo esempio flow^="up" sta usando il ^= (inizia con) matcher. Questo permette agli stili di applicarli anche a up-right e up-left che dovresti aggiungere ai controlli flow. Non li tratteremo adesso qui, ma puoi vederli in utilizzo su my original tooltip demo on CodePen.

Qui ci sono i blocchi di CSS per tutti e quattro i flussi che questo tutorial copre.

Up (default):

Down:

Left:

Right:

Anima tutto quanto

Le animazioni sono fantastiche. Le Animazioni possono:

  • aiutare gli utenti a sentirsi meglio
  • aiutare gli utenti con la consapevolezza spaziale del vostro UI
  • Richiamare attenzione alle cose che necessitano di essere viste
  • ammorbidire elementi di un'interfaccia utente che altrimenti sarebbe un effetto stridente binario on/off

I nostri tooltip cadrà in quell'ultimo descrizione. Piuttosto che avere una bolla di testo pop in esistenza e pop in un lampo, facciamo più morbidi.

@keyframes

Abbiamo bisogno di due animazioni @keyframe. Gli up/down tooltips useranno la tooltips-vert keyframe, e i left/right tooltips useranno la tooltips-horz keyframe. Avviso in entrambi questi keyframes stiamo solo definendo lo stato finale desiderato deile tooltip. Non abbiamo bisogno di sapere da dove provengono (le descrizioni stesse hanno quelle informazioni di stile). Vogliamo solo controllare dove vanno.

Ora, abbiamo bisogno di applicare questi keyframes chiave per le tooltips quando un utente passa sopra gli elementi scatenanti (gli elementi con i [tooltip] attributi). Dal momento che stiamo impiegando vari flussi per controllare come le tooltip si mostreranno, abbiamo bisogno di identificare le possibilità negli stili.

Use :hover per passare il controllo alle animazioni

Ricordate che non possiamo animare la proprietà display, ma siamo in grado di dare alle tooltips un effetto fade-in manipolando l'opacity. Stiamo anche animando la proprietà transform che dà i suggerimenti di un movimento sottile come se stessero volando per puntare agli elementi scatenanti.

Si noti la parola chiave forwards nella dichiarazione di animazione. Questo dice all'animazione di non ripristinare, una volta completata, ma procedere in avanti e rimanere fino alla fine.

Conclusione

Lavoro fantastico! Abbiamo coperto un sacco in questo tutorial, e ora hanno una raccolta ordinata di tooltip da mostrare per il nostro duro lavoro:

Abbiamo solo scalfito la superficie di ciò che può essere fatto con i suggerimenti CSS. Divertiti a giocare con loro e continuare a sperimentare, e inventando le tue ricette!

Più CSS UI Tutorial

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.