Categoria: Guide

Come da titolo, oggi ci tufferemo nell’impresa di creare un tooltip con effetto bolla in puro CSS3. Partiamo sempre con il canonico duo di passaggi.

Fase 1 – Scheletro HTML

In primis, creiamo il nostro file HTML di base, dove, all’interno del tag “body”, aggiungiamo il seguente codice:

<ul id="bubb">
 <li>
 Primo elemento
 <div>
Tooltip del primo elemento
 </div>
 </li>
<li>
 Secondo elemento
 <div>
Tooltip del secondo elemento
 </div>
 </li>
<li>
 Terzo elemento
 <div>
Tooltip del terzo elemento
 </div>
 </li>
 </ul> 

Si tratta di una lista non ordinata, al cui interno ci sono diversi elementi di esempio accanto i quali troviamo un tag “div” che fungerà da tooltip, che sarà mostrato con l’azione hover (ovvero al passaggio del mouse) sul corrispondente tag “li“.

Fase 2 –  Un po’ di Stile con CSS3

Dichiariamo la lista non ordinata con un “display:inline” e specifichiamo come icona del cursore la tipica manina dei link per una questione di usabilità:

#bubb li {
  cursor: pointer;
	display: inline-block;
	margin-left: 10px;
}

Adesso, selezioniamo il “div” che si trova all’interno del “li” per lo stile, aggiungendo alcuni effetti grafici come bordi arrotondati  e ombre per rendere il tutto più accattivante. Nota che la proprietà visibility è hidden e l’opacità è zero. .

Inoltre, ed ecco la parte clou dell’articolo, codifichiamo degli effetti di transizione che definiscono il tempo di durata dell’animazione dopo il mouseout del tag “li”  in 0.4s.

Ecco il codice:

#bubb li > div {
  background: white;
  display: inline-block;
  font-size: 0.8em;
  margin-left: -135px;
  margin-top: 105px;
  min-height: 100px;
  padding: 15px;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  width: 130px;

   /* border-radius */
  border-radius: 15px; /* W3C */
 
   /* box-shadow */
  -moz-box-shadow: 0 0 10px gray; /* Firefox */
  -webkit-box-shadow: 0 0 10px gray; /* Safari e Chrome */
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
  box-shadow: 0 0 10px gray; /* W3C */
 
 /* Transizione */
 -moz-transition: all 0.4s ease-in-out; /* Firefox */
  -webkit-transition: all 0.4s ease-in-out; /* Safari e Chrome */
  -o-transition: all 0.4s ease-in-out; /* Opera */
  transition: all 0.4s ease-in-out; /* W3C */
}

Aggiungiamo infine le proprietà relative al “div” sotto l’azione hover del mouse:

#bubb li:hover > div {
  margin-top: 40px;
  opacity: 1;
  visibility: visible;
  /* Transizione */
  -moz-transition: all 0.4s ease-in-out; /* Firefox */
  -webkit-transition: all 0.4s ease-in-out; /* Safari e Chrome */
  -o-transition: all 0.4s ease-in-out;  /* Opera */
  transition: all 0.4s ease-in-out; /* W3C */
}

Finito! Ecco il risultato del nostro lavoro su CodePen: