Come creare un semplice suggerimento CSS3

I tooltip sono un ottimo modo per mostrare al tuo utente più informazioni semplicemente passando con il mouse sopra un'immagine o un testo. Possono essere utilizzati, ad esempio, per fornire didascalie per immagini o descrizioni più lunghe per collegamenti o qualsiasi informazione utile che possa migliorare l'esperienza utente del tuo sito, senza intromettersi nel design.

Oggi ti mostrerò come creare una semplice descrizione usando HTML e CSS per visualizzare il tag title dei tuoi hyperlink.

Iniziamo creando un semplice markup per il collegamento. Dobbiamo dargli un titolo che sarà il contenuto del tooltip e assegnargli una classe:

CSS3 Tooltip

Il prossimo passo è creare uno stile rudimentale per la nostra classe di suggerimenti:

.tooltip{display: inline;position: relative;}

Ora stiamo visualizzando il nostro tooltip in linea con il nostro link utilizzando il posizionamento relativo. Quindi vogliamo creare una casella arrotondata per formare il corpo del suggerimento e posizionarlo in modo che galleggi sopra il collegamento:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Utilizziamo il selettore hover che seleziona un elemento, in questo caso il nostro link, il mouseover e il selettore: after, che inserisce il contenuto dopo l'elemento selezionato. Abbiamo specificato uno sfondo nero con un'opacità dell'80% e per i browser che non supportano i colori RGBA abbiamo fornito uno sfondo grigio scuro.

Gli angoli leggermente arrotondati vengono creati usando l'attributo border-radius e abbiamo impostato il colore del testo su bianco. Infine, abbiamo posizionato il tooltip box dalla sinistra del link e aggiunto un po 'di padding.

Oltre allo stile e al posizionamento, abbiamo impostato la proprietà del contenuto:

content: attr(title);

Questa proprietà ci consente di inserire il contenuto che vogliamo, che può essere una stringa, un file multimediale o un attributo dell'elemento. In questo caso stiamo usando l'attributo title del link.

Ora, quando si passa il mouse sopra il collegamento, dovrebbe apparire un suggerimento sopra di esso con il testo impostato come titolo del collegamento. Abbiamo un problema però, le informazioni sul titolo vengono mostrate due volte: una volta nella descrizione e una volta dal browser. Per risolvere questo problema, dobbiamo apportare una leggera modifica al nostro HTML:

CSS3 Tooltip 

Quello che abbiamo fatto qui è racchiudere il testo del link in un tag span con il proprio attributo title. Ora il browser mostrerà il set di titoli nel tag span quando il link viene passato sopra.

Per finire aggiungeremo una freccia nella parte inferiore del suggerimento, per dargli quel tocco in più di stile. Lo facciamo usando il selettore: before e alcuni stili di bordo:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

Qui stiamo usando alcuni hack di bordo per creare l'effetto di una freccia: impostazione dei colori dei bordi a sinistra e a destra per la trasparenza e controllo delle larghezze dei bordi. Abbiamo anche posizionato la freccia in modo che si trovi nella parte inferiore della finestra del suggerimento.

Ed ecco fatto, un semplice suggerimento con il tag del titolo dell'elemento al passaggio del mouse. Puoi anche usare questo per i tag alt dell'immagine, o anche solo mettere il tuo testo nel CSS per far apparire dove vuoi.

È possibile visualizzare a demo di lavoro qui .

Come costruisci tooltip? Hai usato questa tecnica su un sito? Fateci sapere nei commenti.

Immagine in primo piano / miniatura, immagine di suggerimento via Shutterstock.