Rollover e bubble tooltips con jQuery

Amo jQuery e il modo in cui semplifica la vita di uno sviluppatore. Con poche righe di codice è possibile eseguire contemporaneamente un rollover ed un tooltip con effetto bubble. Se avessimo voluto programmare tutto da zero avremmo dovuto scrivere diverse decine di righe di codice Javascript!

Per chi non lo sapesse i "tooltip" sono quelle finestre (delle specie di pop-up) che appaiono quando si passa con il mouse sopra ad un link o ad una miniatura di immagine, contenenti informazioni o un'anteprima del link o dell'immagine stessa.

Per fare un esempio creiamo una semplice pagina HTML costituita da una lista non ordinata di tre elementi:

<ul id="list-icons">
<li>
  <a href="http://www.mrwebmaster.it/"</a>
  <img src="icon_mrWebmaster.jpg" alt="" />
  <span>Mr.Webmaster</span>
</a>
</li>
<li>
  <a href="feed://www.mrwebmaster.it/rss/"</a>
  <img src="icon_mrWebmaster.jpg" alt="" />
  <span>Segui i Feed di Mr.Webmaster</span>
</a>
</li>
<li>
  <a href="http://www.facebook.com/MrWebmaster"</a>
  <img src="icon_facebook.jpg" alt="" />
  <span>Mr.Webmaster è sbarcato su Facebook!</span>
</a>
</li>
</ul>

In ciascun elemento (<li>...</li>) di questa lista è presente un link, un'immagine (immagine di default che poi varierà dinamicamente al passaggio del mouse)ed un tag span (contenente il testo che visualizzeremo nei nostri tooltip).

Nell'intestazione della nostra pagina richiamiamo il foglio di stile, la libreria jQuery e la funzione tramite la quale vengono gestiti rollover e tooltip. Di seguito il codice CSS del foglio di stile:

body { background-color: #fff; font: 12px Verdana, Arial, sans-serif; }
a { text-decoration: none; outline: none; color:#d00000; }
img { border: 0; }
#list-icons {
  position: absolute;
  top: 50%;
  left: 30%;
  height: 64px;
  list-style-type: none;
}
#list-icons li {
  float: left;
  position: relative;
  margin-right: 100px;
}
#list-icons span {
  display: none;
  position: absolute;
  top: -100px;
  left: -60px;
  width: 150px;
  height: 101px;
  padding: 20px;
  background: url(bg_tooltip.gif) no-repeat;
  color: #000000;
  text-align: center;
  line-height: 110%;
  cursor: pointer;
}

Come potete notare abbiamo stilizzato il tooltip assegnandogli una posizione assoluta all'interno del proprio elemento di lista (posizione che poi sarà variata dinamicamente da jQuery) ed impostando la proprietà "display:none" in modo da inibirne la visualizzazione al semplice caricamento della pagina.

• <<
• 1
• 2
• >>