Hvordan bygge en jQuery Tooltip Plugin
En jQuery tooltip plug-in viser et lite vindu over et element på websiden din, slik at du kan levere raske tips til brukeren når de holder markøren over en viktig del av siden din. JQuery aktiveres når brukeren svever over elementet, og koden viser div container med teksten du vil vise. Verktøytips er gunstig for skjemaer hvor du må hjelpe brukerne fylle ut tekstboksene.
Bruksanvisning
1 Høyreklikk på HTML-siden du ønsker å endre og legge til verktøytipset. Klikk "Åpne med" og velg din foretrukne HTML editor.
2 Legg jQuery bibliotekfiler til toppen av siden din i "hodet" -delen. Kopier og lim følgende linker til sidene dine:
<Script type = "text / javascript" src = "jQuery-1.3.1.min.js"> </ script>
<Script type = "text / javascript" src = "jquery.betterTooltip.js"> </ script>
3 Lag tipset koblingen du vil bruke for brukeren. Følgende kode oppretter en link for å be brukeren til å klikke for verktøytipset:
<a href="http://site.com/tooltip.php" title="My tooltip text"> Klikk her for hjelp </a>
4 Sett opp verktøytipset koden i "script" -delen av siden din. Følgende kode oppretter en verktøytips når brukeren klikker på linken:
$ .fn.betterTooltip = Function (opsjoner) {
getTip = function () {
var tTip =
"<div class='tip'>" +
"</div>";
return tTip;
$ This.click (function () {
tipInner.html("This is the tooltip");
setTip(tTop, tLeft);
setTimer();
},
})
5 Lagre endringene og åpne filen i nettleseren din for å teste koden for brukerne.