Come costruire un Tooltip plugin jQuery

June 15

Un jQuery tooltip di plug-in consente di visualizzare una piccola finestra sopra un elemento nella pagina Web, in modo da poter fornire suggerimenti rapidi per l'utente quando si passa il mouse sopra una parte importante della tua pagina. Il jQuery si attiva quando l'utente passa sopra l'elemento, e il codice mostra il contenitore div con il testo che si desidera visualizzare. I suggerimenti sono benefiche per le forme in cui è necessario aiutare gli utenti a compilare le caselle di testo.

istruzione

1 Pulsante destro del mouse sulla pagina HTML che si desidera modificare e aggiungere il tooltip. Fai clic su "Apri con" e selezionare l'editor HTML preferito.

2 Aggiungere i file di libreria jQuery per la parte superiore della pagina nella sezione "testa". Copia e incolla i seguenti link alle pagine:

<Script type = "text / javascript" src = "jquery-1.3.1.min.js"> </ script>

<Script type = "text / javascript" src = "jquery.betterTooltip.js"> </ script>

3 Creare il link tooltip che si desidera utilizzare per l'utente. Il codice seguente crea un link per richiedere all'utente di fare clic per il tooltip:

<a href="http://site.com/tooltip.php&quot; title="My tooltip testo"> Cliccare qui per aiuto </a>

4 Impostare il codice tooltip nella sezione "script" della pagina. Il codice seguente crea un tooltip quando l'utente fa clic sul link:

$ .fn.betterTooltip = Function (opzioni) {

getTip = function () {

var tTip =
&quot;&lt;div class='tip'>&quot; +
&quot;&lt;/div>&quot;;
return tTip;

$ This.click (function () {

tipInner.html(&quot;This is the tooltip&quot;);
setTip(tTop, tLeft);
setTimer();
},

})

5 Salvare le modifiche e aprire il file nel browser per testare il codice per gli utenti.