jQuery Powertip rimpiazza i tooltip predefiniti dei browser con dei tooltip personalizzati in cui viene visualizzato il valore dell’attributo title di un elemento html.

Il tooltip creato con jQuery Powertip può visualizzare anche contenuti complessi (titoli, collegamenti, immagini e qualsiasi altro contenuto) definiti attraverso jQuery.

jQuery Powertip è rilasciato con licenza MIT.

Usare jQuery Powertip

jQuery powertip  è molto semplice da usare come si può constatare dall’esempio mostrato di seguito o dalla relativa demo.

<!DOCTYPE HTML>
<html lang="it"><head>
<meta charset="utf-8">
<title>jQuery - jQuery Powertip (1) | Sintesi-Design.it</title>
<link rel="stylesheet" type="text/css" href="css/powertip/jquery.powertip.min.css">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.powertip.min.js"></script>
</head>
<body>
<h2 title="Contenuto del tooltip">Esempio di tooltip</h2>
<script>
$(function(){
	$('h2').powerTip({ placement: 'n' });
});
</script>

</body>
</html>

Prima di tutto scaricare una copia di jQuery e di jQuery powerTip.

Il file compresso scaricato dal sito ufficiale di Powertip contiene il plugin minimizzato (jquery.powertip.min.js) e una serie di file css per definire il colore del tooltip.

Nell’esempio viene usato il foglio di stile  con il nome jquery.powertip.min.css. Il foglio di stile  può essere modificato liberamente per adattare il tooltip al tema del proprio sito.

Dopo aver scaricato i file necessari includere jQuery, il plugin e il foglio di stile nel proprio documento.

<head>
<meta charset="utf-8">
<title>jQuery - jQuery Powertip (1) | Sintesi-Design.it</title>
<link rel="stylesheet" type="text/css" href="css/powertip/jquery.powertip.min.css">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.powertip.min.js"></script>
</head>

Inserire l’elemento html a cui si vuole associare il tooltip, nell’esempio si tratta dell’elemento h2, e impostare nell’attributo title il testo da visualizzare.

<h2 title="Contenuto del tooltip">Esempio di tooltip</h2>

Aggiungere in fondo al documento, subito prima del tag di chiusura dell’elemento body, un altro elemento script con le istruzioni necessarie per attivare il plugin.

<script>
$(function(){
	$('h2').powerTip({ placement: 'n' });
});
</script>

Attivare jQuery powerTip è semplicissimo:

  1. selezionare con la funzione jQuery l’elemento a cui applicare il tooltip (la funzione jQuery selezionerà tutti gli elementi h2 presenti nel documento)
  2. chiamare il metodo .powerTip() indicando la posizione del tooltip rispetto all’elemento con la proprietà placement. Nell’esempio, come si può constatare dall’immagine o dalla relativa demo, il tooltip si trova sopra l’elemento (n).
La proprietà placement di jQuery powerTip

La proprietà placement

La proprietà placement ammette una serie numerosa di valori con cui posizionare il tooltip, tra cui:

  • n, in alto
  • e, a destra
  • s, in basso
  • w, a sinistra

Per visualizzare tutti gli altri valori che possono essere utilizzati con la proprietà placement, consultare la demo o il sito ufficiale del plugin.