I tooltip css non hanno tutte le funzionalità di quelli realizzati con i plugin di jQuery ma sono estremamente semplici da realizzare con del semplice codice html e qualche regola css.

Il tooltip nel codice html

Il tooltip predefinito del browser mostra in genere il contenuto dell’attributo title di un elemento o dell’attributo alt se si tratta di un’immagine. Nell’esempio, però il contenuto del tooltip è quello dell’attributo data-title.

<p>Lorem ipsum dolor sit amet... 
  <a href="#" data-title="Lorem ipsum ..." >Nullam ac</a>
  suscipit est, sit amet fringilla ...
</p>

 

Si è scelto di utilizzare l’attributo personalizzato data-title per evitare che i browser mostrino il tooltip predefinito insieme a quello realizzato in css (immagine seguente).

Creare un tooltip css: usare l'attributo title

Creare un tooltip css: usare l’attributo title

Per ovviare a questo inconveniente si può utilizzare un plugin di jQuery come jQuery PowertipjQuery Tooltipify.

Creare il tooltip css

Per realizzare il tooltip css si utilizzeranno gli pseudo elementi :before e :after con cui si genererà il contenuto del tooltip e la coda.

Per prima cosa posizionare in modo relativo gli elementi a, con l’attributo data-title impostato, in modo che possano essere utilizzati come riferimento per il posizionamento del tooltip.

a[data-title]:link, a[data-title]:visited {
 position: relative;
}

Creare l’area dei contenuti con lo pseudo elemento :after all’interno del quale sarà visualizzato il valore dell’attributo data-title con la funzione attr(). Lo pseudo elemento è posizionato in modo assoluto rispetto all’elemento a con le proprietà top e left.

a[data-title]:after { /* Contenuto */
 content: attr(data-title);
 position: absolute;
 top: -40px;
 left: -20px;
 color: white;
 font-size: .85em;
 background-color: #222;
 border-radius: 5px; 
 padding: 10px 15px;
 white-space: nowrap;
 visibility: hidden;
 transition:.3s;
}

Al momento il tooltip viene nascosto impostando la proprietà visibility con il valore hidden.

Le altre proprietà possono essere modificate in base alle proprie esigenze senza modificare il comportamento del tooltip.

La coda del tooltip css viene realizzata con lo pseudo elemento :before, che viene posizionato in modo assoluto come si è fatto per il contenuto.

a[data-title]:before { 
 content: "";
 position: absolute;
 top: -15px;
 left: -20px;
 border-top: 15px solid #222; /*Triangolo*/
 border-left: 25px solid transparent;
 border-right: 25px solid transparent;
 border-bottom: 25px solid transparent;
 visibility: hidden;
 transition:.3s;
}

L’aspetto della coda si ottiene impostando dei bordi di dimensioni adeguate su tutti i lati e visualizzando solo il bordo superiore. Gli altri bordi sono stati nascosti con la parola chiave transparent.

Anche la coda è nascosta con la proprietà visibility in modo che venga visualizzata solo quando il mouse si sovrappone all’elemento, come mostrato dal seguente esempio.

a[data-title]:hover:before, a[data-title]:hover:after {
 visibility: visible;
 transition:.3s visibility .3s;
}

Visualizza la demo completa