Jednostavni Tooltip box - JavaScript

Ovo je jedna od onih stvari koje se uvelike koriste na današnjim Internet stranicama. U malom tekstualnom okviru prikazati važne podatke, naslove, upute našim korisnicima. Naše rješenje je jednostavno i učinkovito te ga možete lako unaprijediti i prilagoditi vlastitim potrebama. Prvo napišimo JavaScript kod koji ćemo staviti u head dio.

Kod:

<script language="javascript">

var Tips = new Array();

Tips[0] = "Prvi tooltip na vašoj stranici";
Tips[1] = "Kako je lako napraviti ovaj box!";
Tips[2] = "Jednostavno kao Copy/Paste!";

var trenutnitooltip = Math.ceil(Math.random() * Tips.length) - 1;

function next_tooltip()
{

trenutnitooltip = trenutnitooltip + 1;

if (trenutnitooltip > (Tips.length - 1))
{
trenutnitooltip = 0;
}

document.getElementById('text_tooltip').innerHTML = Tips[trenutnitooltip];
}

</script>

Pogledajmo detaljnije gornji kod. Prvo definiramo novo polje Tips u koje ćemo upisivati poruke. Ovo polje ćemo napraviti kao dinamičko tako da možemo dodati poruka koliko god želimo. Odmah ispod definicije polja upisujemo poruke u polje. Poruke upisujemo jednu ispod druge radi preglednosti te povećavamo broj koji definira mjesto poruke u polju počevši od 0 pa naviše.

Za naš primjer potrebno je da znamo na kojoj smo poruci i zbog toga definiramo varijablu trenutnitooltip i u nju smještamo slučajno odabrani broj poruke koju ćemo prvu prikazati. Za dobivanje slučajnog broja između 0 i 1 koristimo funkciju Math.random te je množimo sa dužinom polja da dobijemo brojeve između 1 i maksimalnog broja u polju.

Sada dolazi jednostavna funkcija koja u će u div element ispisivati odabranu poruku te će nakon svakog poziva prikazati sljedeću poruku u redu. Kada dođemo do kraja ova će funkcija resetirati brojač te ga vratiti na nulu i tako početi prikazivati poruke ispočetka. Sada pogledajmo body dio stranice.

Kod:

<div id="naslov_tooltip"
style="width:200px; background-color: #e36731;padding:5px;
border: solid 1px #e36731;">
Tips & Tricks
</div>

<div id="tooltips" style="width:200px; background-color: #dadada;
padding:5px;border: solid 1px #e36731;">

<div id="text_tooltip">
<script>document.write(Tips[trenutnitooltip]);</script>
</div>

<p align="right">
<a href="javascript:next_tooltip();">
Sljede&#263;i
</a>
</p>
</div>

Ovdje radimo samo dvije stvari. Prva je da se pri otvaranju stranice odmah ispiše početni sadržaj u naš box. A druga je link koji prikazuje sljedeću poruku. Sa funkcijom document.write ispisujemo početnu poruku. Klikom na link Sljedeći poziva se naša funkcija next_tooltip() te se u naš okvir ispisuje sljedeća poruka prema već definiranom pravilu u funkciji. Ovaj box naravno prilagodite vašoj stranici, promijenite boje, promijenite vrstu i veličinu slova, itd., ali osnovu imate.