Vihjetekst, tilluke liideseelement, mis kas päästab kasutaja või ärritab teda lõputult. Liigutad kursori ikooni kohale, ootad vihjet ja saad selle asemel: tühja ruudu, kärbitud teksti või hüpikakna, mis roomas ekraani servast välja.

Vihjetekstide nullist käsitsi kirjutamine tähendab maadlust positsioneerimise, z-indeksi, responsiivse disaini ja animatsiooniga. Valmis teegid lahendavad kõik selle paari koodireaga. Aga milline neist valida, kui turul on kümneid variante alates mikroskoopilistest CSS-i juppidest kuni täiemahuliste tootetuuride raamistikeeni?

Kogusime kokku 21 avatud lähtekoodiga vihjetekstide pistikprogrammi: JavaScripti, jQuery ja puhta CSS-i jaoks koos otsekuvatud ekraanipiltide ja ausate võimaluste ülevaadetega. Siin on tööriistad igaks stsenaariumiks: kiire vihjetekst maandumislehele, HTML-sisuga vihjetekst veebirakendusele ja samm-sammuline kasutuselevõtt SaaS-ile.

💡 Kiirülevaade:

• Vali kategooria: puhas CSS, jQuery või vanilla JS.
• Otsusta, mis sisse läheb: ainult tekst või HTML koos piltide ja nuppudega.
• Kontrolli automaatset positsioneerimist: et vihjetekst ei läheks ekraani servast välja.
• Tootetuuride jaoks võta Intro.js või Hopscotch, need on kohandatud kasutuselevõtuks.

Ülevaatetabel: 21 pistikprogrammi 30 sekundiga

1. Tippy.js

Tippy.js on de facto standard moodsas frontendis vihjetekstide jaoks. Arendaja atomiksi teek on ehitatud Popper.js-i (hiljem Floating UI) peale ja pakub veatut positsioneerimist: vihjetekst väldib ise ekraani servi, pöörab ümber ja kohandub vaateaknaga.

Sees on kõik, mida tõsiseks kasutajaliideseks vaja: animatsioon CSS-i üleminekute kaudu, interaktiivsed vihjetekstid (saad sisul klõpsata ilma sulgemiseta), kursori jälgimine, pesastatud vihjetekstid ja laisk renderdamine. Toetab Reacti, Vue'd ja puhast DOM-i.

Meie kogemuse põhjal peaksid Tippy.js-ile üle minema, kui projekt kasvab jQuery loomaaiast välja: teek eemaldab suurema osa positsioneerimise peavalust ilma ühegi käsitsi kirjutatud CSS-i reata.

Plussid: minimaalne sõltuvuste puu, TypeScripti tüpiseerimine karbist välja, dokumentatsioon koos elavate näidetega. Miinused: ülepingutus lihtsa tekstivihje jaoks maandumislehel; komplekti suurus ~30 KB (kuigi tree-shaking aitab).

🔗 Tippy.js GitHubis🔗 Dokumentatsioon ja demo

2. Tooltipster

Tooltipster on veteran jQuery vihjetekstide pistikprogrammide seas, mis pole kõrvitsaks muutunud. Teek on töötanud alates 2012. aastast ja saab endiselt uuendusi. Peamine omadus on neli valmis kujundusteemat (vaikimisi, hele, ääristeta, punk) pluss võimalus ehitada oma CSS-i kaudu.

Tooltipster käsitleb HTML-sisu, AJAX-laadimist, mitut päästikut (hõljumine, klõps, fookus, programmiline kutse), näitamise/peitmise taimereid ja tagasikutseid igale elutsükli etapile. Eraldi plussiks on sisseehitatud tugi puuteseadmetele: elemendi puudutamine näitab vihjeteksti, korduv puudutus peidab selle.

Praktikas sobib Tooltipster hästi WordPressi ja jQuery pinul põhinevatesse projektidesse, kus moodsa komplekti npm-ist sissetõmbamine on ebamugav: lihtsalt ühenda skript, seadista valikud ja kõik title-ga lingid muutuvad kenadeks vihjetekstideks.

Plussid: küps plugin etteaimatava käitumisega, suurepärane dokumentatsioon, puutetugi. Miinused: seotud jQueryga (aastal 2026 on see juba sõltuvus, millest paljud tahavad vabaneda).

🔗 Tooltipster GitHubis

3. CSS Tooltip

Minimalistlik tööriistavihje puhtas CSS-is: HTML-element atribuudiga data-tooltip, pseudoelemendid ::before ja ::after noole ja tausta jaoks, lisaks sujuv üleminek hõljumisel. Pole vaja JavaScripti ega isegi sündmuste kuulajaid.

Lahendus sobib staatilisele sisule: blogid, dokumentatsioon, maandumislehed. Kaalub alla kilobaidi, ei vaja sõltuvusi ega mõjuta esimese sisendi viivitust. Lihtsalt kopeeri CSS-i lõik projekti ja lisa data-atribuudid.

Plussid: null JS-i, hetkeline jõudlus, lihtne kohandada värve ja vahesid. Miinused: ainult tekst, automaatne positsioneerimine puudub, piiratud käitumine mobiilis (hõljumist ei toimu).

4. Tipr

Tipr on tilluke jQuery plugin (alla 2 KB minifitseeritult), mis teeb täpselt üht asja: kuvab hüpikuna tööriistavihje, kui hiirega mistahes HTML-elemendi kohal hõljuda. Lame disain, seriifideta, minimaalne seadistamine data-atribuutide kaudu.

Ideaalne, kui vajad, et asi „lihtsalt töötaks" ilma tarbetute abstraktsioonideta. Toetab nelja asukohta, kohandatud klasse ja päästiku vahetamist. Meie soovitus on võtta Tipr väikeste projektide jaoks, kus jQuery on juba olemas ja sa ei soovi tööriistavihjete jaoks eraldi sõltuvust lisada.

Plussid: mikroskoopiline maht, lihtne API, ei vaja seadistamist. Miinused: autor on hüljanud, primitiivne positsioneerimine (võib ekraani servas ära lõigata).

Tipr on saadaval GitHubis

5. CSS tooltip appear

Veel üks puhta CSS-i teostus, seekord rõhuga ilmumisanimatsioonil. Tööriistavihje libiseb sujuvalt välja, kohandatava kestuse ja leevenduskõveraga. Sobib olukordadesse, kus funktsioon pole nii oluline kui visuaalne mulje: portfooliod, promolehed, esitlussaiddid.

Plussid: ilus animatsioon, puhas CSS, skripte pole. Miinused: ainult tekst, positsioneerimine ekraani servades puudub, interaktiivsus puudub.

6. Grumble.js

Grumble.js paistab visuaalselt silma: tööriistavihje on stiliseeritud koomiksimullina ja võib pöörelda ümber sihtelemendi 360 kraadi 1° sammuga. Arendaja James Cryer lõi plugin spetsiaalselt mittestandardse kasutajaliidese jaoks, kus tavaline ristkülik näeks võõras välja.

Plugina pole aastaid uuendatud, kuid kontseptsioonina ja lemmikprojektide jaoks on see endiselt huvitav. Me ei paneks seda toodangusse elava projekti peal: sõltuvustes on aegunud jQuery versioon ja mobiilitugi puudub.

Plussid: ainulaadne disain, täpne nurga kontroll, meeldiv animatsioon. Miinused: ei toetata, iidne jQuery, responsiivne disain puudub.

🔗 Grumble.js GitHubis

7. Protip

Protip on jQuery plugin, mis positsioneeris end kui „tööriistavihje igaks olukorraks". Mitu nahka (sh tume teema), animeeritud üleminekud, neli asukohta ja HTML-i tugi. Hoidla põhjal otsustades rakendas autor API, keskendudes laiendatavusele: sa saad seadeid kaskaadida ja määrata globaalseid vaikeväärtusi.

Praktikas on Protip soliidne kesktaseme valik jQuery projektidele. Mitte nii võimas kui Tooltipster, kuid piisav põhistsenaariumite jaoks.

Plussid: mitu teemat, mugav API, animatsioon. Miinused: hoidlat pole uuendatud, napp dokumentatsioon.

Protip on saadaval GitHubis

8. Tipped

Tipped on kerge JavaScripti teek, millel puuduvad sõltuvused. Toetab mitut kujundust, suurust ja interaktsioonivarianti: hover, klikk, fookus, käsitsi väljakutse. Positsioneerimine on fikseeritud (neli külge), ilma servade targa vältimiseta, lihtsate liideste jaoks on see piisav.

Pane tähele, et teeki pole pikka aega uuendatud ja kogukonna tugi on minimaalne. 2026. aastal soovitaksime uue projekti puhul Tippy.js-i, aga kui projekt juba kasutab Tippedi ja see töötab, pole mõtet vahetada.

Plussid: sõltuvused puuduvad, lihtne API, mitu kujundust. Miinused: automaatne positsioneerimine puudub, projekt tundub hüljatud.

Tipped on saadaval GitHubis

9. Microtip

Arendaja Indrashish Ghosh’i Microtip on puhas CSS-i vihjeteek, mis kaalub gzipitult alla 1 KB. Ligipääsetavus on karbist väljas (aria-label + role="tooltip"), GPU animatsioon (transform top/left asemel), responsiivne font.

Meie lemmikstsenaarium Microtipi jaoks on ikoonid ilma siltideta administraatoripaneelis või liideses: riputa külge aria-label, lisa klass ja kasutaja saab vihje ilma ühegi JavaScripti reata. Teeki kasutatakse aktiivselt GitHubi projektides (3,5k+ tähte), kuigi viimastel aastatel pole suuremaid uuendusi olnud.

Plussid: ülikerge, ligipääsetavuseks valmis, ei aeglusta renderdamist. Miinused: ainult tekst, interaktiivsus puudub, fikseeritud asukoht.

🔗 Microtip GitHubis

10. Auto Tooltips

Auto Tooltips on JavaScripti teek, mis valib automaatselt vihjele optimaalse asukoha sõltuvalt vabast ruumist. Erinevalt Microtipist või CSS Tooltipist võib siin vihje hüpata elemendi teisele küljele, kui ekraani servas pole piisavalt ruumi.

Visuaalselt on tegemist stiilsete vihjetega, millel on vari ja ümarad nurgad. Positsioneerimisloogika on kirjutatud ilma väliste sõltuvusteta, kogu teek mahub mõnesse kilobaiti.

Plussid: automaatne positsioneerimine, kerge, stiilne disain. Miinused: repositoorium on mitteaktiivne, dokumentatsioon minimaalne.

11. JBox

JBox pole lihtsalt vihje, vaid universaalne dialoogiraamistik jQuery baasil. Lisaks hüpikvihjetele haldab see modaalaknaid, teateid (notice) ja täisekraani ülekatteid. Iga dialoogitüüp on eraldi plugin ühises arhitektuuris.

Meie kogemuse põhjal on JBox hea projektides, kus on vaja ühtset visuaalset stiili kõigile hüpikelementidele. Teek toetab AJAX-sisu, animatsiooni, tagasikutseid ja responsiivset positsioneerimist. Maht on funktsionaalsusega põhjendatud: ~20 KB terve dialoogikomponentide komplekti eest.

Plussid: neli dialoogitüüpi ühes paketis, hea dokumentatsioon, aktiivne tugi. Miinused: jQuery sõltuvus, üleliigne, kui vajad ainult vihjeid.

🔗 JBox GitHubis

12. Wenk

Wenk (hindi keelest "jaanimardikas") on CSS-i vihjeteek, mis kasutab positsioneerimiseks data-atribuute. Saad määrata asukoha (data-wenk="left"), pikkuse ja noole stiili. Kogu maagia on puhtas CSS-is, pluss valikuline JS-fail automaatseks asukohavalikuks.

Kaal on umbes 1,2 KB minifitseeritult. Suurepärane valik, kui Microtip tundub liiga minimalistlik ja sa ei taha Tippy.js-i sisse tõmmata.

Plussid: data-atribuudid asukoha jaoks, kerge JS-abiline, meeldiv disain. Miinused: interaktiivsed vihjed puuduvad, positsioneerimine piiratud kaheksa suunaga.

Wenk on saadaval GitHubis

13. Crumble

Crumble on Grumble.js-i ülekate, mis lisab sulgemisel mulli "murenemise" efekti. Visuaalselt huvitav kontseptsioon, kuid topeltsõltuvus (jQuery + Grumble.js) ja uuenduste täielik puudumine teevad sellest üksnes ajaloolise eksponaadi.

Kaasasime Crumble’i kollektsiooni terviklikkuse ja visuaalse mitmekesisuse huvides, kuid reaalse projekti jaoks otsi elujõulisemaid alternatiive.

Plussid: unikaalne sulgemisanimatsioon, tõmbab tähelepanu. Miinused: kaks aegunud sõltuvust, mitte tootmiskeskkonda.

🔗 Grumble.js (sõltuvus)

14. Intro.js

Intro.js pole enam vihje, vaid täisväärtuslik raamistik kasutaja sisseelamiseks. Teegiga saad luua samm-sammult juhiseid: elemendi esiletõstmine, hüpikaken selgitusega, nupud "Edasi"/"Valmis". Sõltuvused puuduvad, puhas JavaScript.

Meie testis näitas Intro.js end kõige küpsema tööriistana tootetuuride jaoks: 23k+ tähte GitHubis, TypeScripti koodibaas, mitmeleheküljeliste tuuride tugi (koos oleku ülekandmisega lehtede vahel), kohandamine CSS-klasside ja tagasikutsete kaudu igale sammule.

Plussid: de facto standard sisseelamistuuride jaoks, aktiivne arendus, detailne dokumentatsioon. Miinused: ~45 KB, funktsionaalsusega põhjendatud, kuid lihtsa vihje jaoks üleliigne.

🔗 Intro.js GitHubis🔗 Otseesitlus

15. PowerTip

Steven Benneri (jQuery QueryBuilderi autor) PowerTip toob sisse huvitava kontseptsiooni: reeglisüsteem tagab, et ekraanil on korraga nähtav ainult üks vihje. See lahendab klassikalise probleemi, kus kasutaja liigutab kursorit kiiresti üle mitme elemendi ja saab kattuvaist vihjeist segaduse.

Plugin toetab vihje sees keerukat märgendust (sh AJAX-sisu), kohandatud päästikuid ja positsioneerimist kaheksas suunas. jQuery projektides on PowerTip üks usaldusväärsemaid valikuid.

Plussid: nutikas kuvamissüsteem, HTML-sisu, stabiilne töö. Miinused: jQuery sõltuvus, hoidla saab harva uuendusi.

🔗 PowerTip GitHubis

16. Toolbar.js

Paul Kinzetti Toolbar.js on „vihje kui tööriistariba" lähenemine: hüpikaken sisaldab lisaks tekstile nuppe, ikoone, linke. Tüüpiline stsenaarium on teksti valimine lehel, mille järel ilmub paneel nuppudega „Kopeeri", „Jaga", „Otsi".

Plugin kasutab positsioneerimiseks Popper.js-i, mis tagab korrektse käitumise ekraani servades. Projekt kogus üle 2,3 tuhande tärni, kuid viimastel aastatel pole suuremaid uuendusi olnud. Kontseptuaalselt mõjutas Toolbar.js paljusid kaasaegseid UI mustreid (Mediumi-laadsed valikupaneelid).

Plussid: ainulaadne „vihje kui tegevuspaneel" lähenemine, hea positsioneerimine. Miinused: projekt on külmutatud, seotud vana Popper.js-i versiooniga.

🔗 Toolbar.js GitHubis

17. Simptip

Simptip on CSS-i vihjeteek, mis on kirjutatud Sass-is, kasutades mikseid ja muutujaid. See teeb selle mugavaks projektides, kus vihje välimus peab täpselt disainisüsteemiga ühtima: muuda $bg-color muutujat ja kõik vihjed värvuvad ümber.

Teek toetab pehmeid ja teravaid nooli, nelja positsiooni ning ilmumisefekti (sissehaihtumine). Maht on minimaalne: kompileeritud CSS on umbes 2 KB.

Plussid: Sass-i muutujad kohandamiseks, puhas disain, kergekaaluline. Miinused: HTML-sisu puudub, projekti ei uuendata.

🔗 Simptip GitHubis

18. HubSpot Tooltip

HubSpot avaldas oma sisemise vihjeteegi avatud lähtekoodiga, see on ehitatud Tether (positsioneerimismootor, Popper.js-i eelkäija) ja Drop (rippmenüüelementide teek) peale. Kombinatsioon pakub võimsat ja paindlikku automaatse positsioneerimisega vihjesüsteemi.

Praegu pakub HubSpot Tooltip pigem ajaloolist huvi: teeki ei uuendata, Tether asendati ametlikult Popper.js-iga (ja seejärel Floating UI-ga). Sellegipoolest mõjutasid HubSpoti arhitektuurilised otsused kaasaegseid teeke, lähenemine „positsioneerimismootor + kuvamismootor" ise sai standardiks.

Plussid: tööstuslik koodikvaliteet, hea positsioneerimine, HTML-i tugi. Miinused: aegunud sõltuvused (Tether), projekt on külmutatud.

🔗 HubSpot Tooltip GitHubis

19. Hopscotch

Hopscotch on Intro.js järel teine raamistik tootetuuride loomiseks. Lähenemine erineb: DOM-elementide ahela asemel kirjeldad tuuri JSON-objektina (sammud, sihtmärgid, sisu) ning teek haldab renderdamist ja navigatsiooni ise. Toetab mitmeleheküljelisi tuure: kasutaja järgib linki ja tuur jätkub samast sammust.

Projekt liikus broccolijs-archive organisatsiooni tiiva alla ja on külmutatud. Uue toote jaoks soovitame Intro.js-i, aga kui toetad pärandkoodi Hopscotchiga, siis see töötab endiselt ja on dokumenteeritud.

Plussid: JSON-põhine tuuri kirjeldus, mitme lehe tugi, küps API. Miinused: projekt arhiveeritud, uusi funktsioone ei lisandu.

Hopscotch GitHubis (projekt arhiveeritud)

20. Darktooltip

Darktooltip on jQuery pistikprogramm fikseeritud tumeda kujundusega, HTML-sisu toega ja ilmumisanimatsiooniga. API on lihtne: kutsu elemendil .darktooltip(), anna valikud ette ja valmis. Sobib väikestele vidinatele ja adminipaneelidele, kus on vaja kiiret ühtlast vihjet ilma CSSiga jändamiseta.

Meie kogemuse põhjal on Darktooltip nišitööriist: kui tume teema sobib kujundusega, töötab hästi; kui on vaja värvide kohandamist, on lihtsam võtta Tooltipster või Tippy.js.

Plussid: lihtne API, HTML-sisu, meeldiv animatsioon. Miinused: ainult tume teema, jQuery sõltuvus, projekt passiivne.

🔗 Darktooltip GitHubis

21. Tipso

Tipso lõpetab kollektsiooni kui meeldiv kerge jQuery pistikprogramm CSS3 animatsiooniga. Responsiivne disain on karbist väljas (vihje suurus muutub mobiilis), mitu päästikut ja asukohta, HTML-i tugi. Eraldi märgime, et Tipso on olemas ka pluginana WordPressile, mis võib olla mugav WordPressi saidi omanikele, kes ei taha koodi süveneda.

Teeki pole mitu aastat uuendatud, kuid koodibaas on stabiilne ja kriitilisi vigu pole. Lihtsate jQuery projektide jaoks toimiv variant.

Plussid: responsiivsus, WordPressi versioon, meeldiv animatsioon. Miinused: ei uuendata, seotud jQueryga.

🔗 Tipso GitHubis

Kuidas me testisime ja kuidas oma vihjet valida

Käisime iga pistikprogrammi läbi sama kontrollnimekirjaga: laadimine tühjal lehel, renderdamine ekraani servas, käitumine kiirete hõljumisvahetuste korral, mobiilne puudutus, värvi/fondi kohandamine. Ülaltoodud tabeli hinnangud pole abstraktsed „tärnid", vaid nende testide otsesed tulemused.

Kiireks valikuks hoia käepärast see sobivusmaatriks:

• Maandumisleht, blogi, dokumentatsioon → Microtip või Wenk. Puhas CSS, hetkeline laadimine, ei midagi üleliigset.
• Adminipaneel jQueryl, WordPressi sait → Tooltipster. Küps, stabiilne, puutetundliku toega.
• Kaasaegne veebirakendus, React/Vue → Tippy.js. Turu parim positsioneerimine, TypeScript, aktiivne arendus.
• Dialoogiaknad + vihjed + teavitused ühes paketis → JBox. Ühtne stiil kõigile hüpikakendele.
• Tootetuur, sisseelamine, samm-sammult juhised → Intro.js. Tööstusstandard, 23k+ tähte, mitmeleheküljelised tuurid.

Üldreegel, mille me testidest tuletasime: kui kahtled, võta Tippy.js. See katab valdava enamuse stsenaariume, ei too kaasa jQueryt ja lahendab positsioneerimise probleemi lõplikult. Ja kui projekt on juba jQuery peal ja migratsiooniks eelarvet pole, siis Tooltipster ei vea alt.

Video: kuidas luua ilus vihje puhtas CSS-is

Et vihjeid töös näha, vaata seda AlgoKage'i õpetust, 10 minutiga ehitad stiilse hüpikvihje ilma ühegi JavaScripti reata:

⁉️🤔 Korduma kippuvad küsimused

Kas vihjete jaoks on JavaScripti vaja?

Pole tingimata. Lihtsa tekstivihje jaoks töölaual piisab CSS-ist (Microtip, Wenk, Simptip). Aga kui on vaja HTML-sisu, automaatset positsioneerimist ekraani servades, klikipäästikut või mobiilituge, siis ilma JavaScriptita ei saa. Tippy.js ja Tooltipster katavad need stsenaariumid.

Kui oluline on ligipääsetavus (a11y) vihjete puhul?

Kriitiline. Ekraanilugeja kasutajad peavad saama vihje teksti ilma kursorit hõljutamata. Õige lähenemine: kasuta päästikul aria-describedby ja vihjel endal role="tooltip". Tippy.js ja Microtip toetavad seda karbist väljas. Kui kirjutad ise vihjet, ära ignoreeri WAI-ARIA-t.

Kuidas on Tippy.js parem kui vana Tooltipster?

Tippy.js ei sõltu jQueryst, on kirjutatud TypeScriptis, kasutab positsioneerimiseks Floating UI-d (vihje püsib alati vaateaknas) ja toetab tree-shaking'ut. Tooltipster on küps ja stabiilne, kuid jQuery sõltuvus on 2026. aastal uute projektide jaoks ebasoovitav. Kui sul on juba jQuery stack, on Tooltipster suurepärane valik; kui alustad nullist, siis Tippy.js.

Kas ühel saidil võib kasutada mitut vihjeteeki?

Tehniliselt jah, kuid praktikas tekitab see stiilikonflikte, koodi dubleerimist ja silumissegadust. Erandiks on Microtip ikoonide jaoks + Intro.js tootetuuriks: nende vastutusalad ei kattu. Üldiselt vali põhistsenaariumi jaoks üks teek.

Miks vihjed mobiilis ära lõigatakse?

Mobiilseadmetel pole hõljumist ja nende vaateaken on kitsas. Vihjed, mis töölaual näitavad elemendist paremale, võivad mobiilis ekraanilt välja minna. Lahendus: kas responsiivne positsioon (Tippy.js oskab automaatselt külge valida) või asenda vihje mobiilis klikitava hüpikaknaga.

Kas peaks reaalses projektis kasutama Grumble.js-i või Crumble'i?

Ei. Mõlemat teeki pole uuendatud üle 10 aasta ja need sõltuvad vananenud jQuery versioonist. Visuaalselt on need kontseptsioonina huvitavad, kuid tootmiskeskkonda võta kaasaegsed analoogid: Tippy.js koos kohandatud teemaga suudab imiteerida mis tahes visuaalset stiili ilma vananenud sõltuvusteta.

Millist vihjepluginat 2026. aastal valida?

Kakskümmend üks pluginat on valikuks palju, kuid tõeliselt universaalsed on neist kolm: Microtip ülikergete CSS-vihjete jaoks, Tooltipster jQuery projektide jaoks ja Tippy.js kõige muu jaoks. Intro.js on omaette, see pole vihje, vaid sisseelamise raamistik ja oma nišis on see parim.

Ülejäänud kaheksateist on kas nišitööriistad kindla kujunduse jaoks (Darktooltip, Simptip) või ajaloolised artefaktid, mis mõjutasid tööstust (Grumble.js, HubSpot Tooltip), või soliidsed, kuid külmutatud projektid, mis endiselt töötavad, kuigi uue koodi jaoks on parem võtta midagi elusat.

Kui sa lugesid siiani, siis kogumik täitis oma ülesande: nüüd tead, millist pluginat oma projekti jaoks võtta. Võta ja proovi, kõik lingid dokumentatsioonile ja repositooriumitele on iga tööriista kirjelduses.