Jednostavni Tooltip box

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.

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.

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. Pogledajmo kako ovo sve radi u praksi.