TinyTips, Plugin jQuery per Tooltips

Pubblicato da Yuri Carlenzoli | 05 Marzo 2010

Tramite l'utilizzo di tinyTips, un plugin per jQuery è possibile mostrare tooltips anche con immagini il title dei link.

TinyTips

Nell'immagine qui sopra non per niente mostro TinyTips al lavoro con il title di un'anchor text siccome, personalmente, anche se mi piacciono gli "effetti" che si possono fare con jQuery preferisco la velocità di caricamento, TinyTips applicato solo all'attributo title non è estremamente pesante e potrebbe in qualche modo a rendere ancora più descrittivo un link.

Dopo la premessa di come lo userei io è giusto dire come lo si potrebbe utilizzare al 100% TinyTips, infatti non è possibile solo far apparire un tooltip in corrispondenza del title di un'anchor, ma, tramite le apposite classi CSS si può:

  • Aggiungete del testo al tooltip che apparirà sulle immagini, usa il title delle immagini;
  • Mostrare un'immagine al posto del title in un link testuale;
  • Aggiungere tramite JavaScript tooltip a classi CSS.

Ora, per chi non mastica molto di "programmazione web" dico come usare TinyTips per avere il tooltip sui title tag, preciso che bisogna avere un'hosting dove mettere il file Javascript di TinyTips, se lo si è messo ad esempio nella directory script e si richiama jQuery dalla CDN di Google prima del tag </head>, per visualizzare i tooltips del title dell'anchor text si metterà il seguente codice:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/script/jquery.tinyTips.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('title');
});
</script>

Ora, facendo un link normale non verranno visualizzati i tooltips del title tag, usando invece la classe tTip nel collegamento in questo modo <a title="questo verrà visualizzato nel tooltip" href="www.sito.it" class="tTip">Vai al Sito</a> verrà visualizzato il tooltip.

Da qui potete fare il download di TinyTips ed imparare come si può usare al 100%.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Moderazione dei commenti attiva. Il tuo commento non apparirà immediatamente.