Corsi on-line

Tooltip a fumetto con jQuery

Girovagando per la reto ho trovato un piccolo script molto utile e graficamente carino che permette di visualizzare un tooltip all’interno di una specie di fumetto, con tanto di animazione annessa.
Tramite questo script, che utilizza jQuery, è infatti possibile far comparire un fumetto (dentro potete disegnarci del testo che descrive, ad esempio, il contenuto di un link) al passaggio del mouse sopra di un qualsiasi elemento della pagina (nel nostro caso un link ai feed RSS).

Vi servirà solamente la libreria jQuery e l’immagine del fumetto (nel nostro esempio viene utilizzata anche una piccola iconcina che non è essenziale ai fini del funzionamento dello script). Di seguito un esempio completo.

Codice Javascript:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".fumetto a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
   },
   function() {
     $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
   });
});
</script>

Codice HTML:

<div class="fumetto">
 <a href="feed.xml" id="rssico">RSS Feed</a>
 <em>Sottoscrivi il mio feed RSS!</em>
</div>

Ecco un esempio di CSS relativo al link precedente:

.fumetto {
 margin: 100px auto;
 padding: 0;
 width: 100px;
 position: relative;
}

div.fumetto em {
 background: url(fumetto.png) no-repeat;  /* immagine del fumetto /*
 width: 100px;
 height: 49px;
 position: absolute;
 top: -70px;
 left: -0px;
 text-align: center;
 text-indent: -9999px;
 z-index: 2;
 display: none;
}

#rssico {
 width: 42px;
 height: 42px;
 background: url(icona.png) no-repeat 0 0;
 text-indent: -9999px;
 margin: 0 auto;
 display: block;
}

Per visualizzare una demo del risultato finale clicca qui.

Post correlati
I più letti del mese
Tematiche