Filtra la ricerca ...
Frase esatta
Categorie

Come creare tooltip utilizzando solo CSS3 ed HTML5

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

I Tooltips sono delle piccole finestre che si aprono normalmente al passaggio del mouse su un link ipertestuale, nella compilazione di un form oppure appaiono per mostrare eventuali avvisi o errori all’interno di un sito web.

come creare tooltip con css3
Con CSS3 ed HTML5 è possibile creare dei tooltip molto carini e semplici, senza ricorrere all’utilizzo di jQuery o altre librerie Javascript.

Vediamo subito un esempio pratico.

la classe tooltip serve per la formattazione del tooltip vero e proprio, invece la proprietà CSS3 data-tool=”classico” contiene il testo del tooltip .

In questo caso avremo un effetto come nella figura sottostante

esempio tooltipIl CSS3 che regola e formatta il tooltip è il seguente

Nel file css allegato all’archivio .zip, dalla riga 215 è possibile personalizzare la colorazione dei toolips cambiando semplicemente il valore esadecimale.

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.