Työkaluvihje, pieni käyttöliittymäelementti, joka joko pelastaa käyttäjän tai ärsyttää häntä loputtomasti. Viet kursorin kuvakkeen päälle odottaen vihjettä, ja saatkin: tyhjän laatikon, katkaistua tekstiä tai ponnahdusikkunan, joka karkasi ruudun reunan yli.

Työkaluvihjeiden kirjoittaminen käsin alusta asti tarkoittaa painimista sijoittelun, z-indeksin, responsiivisen suunnittelun ja animaation kanssa. Valmiit kirjastot ratkaisevat tämän kaiken muutamalla koodirivillä. Mutta minkä valita, kun markkinoilla on kymmeniä vaihtoehtoja mikroskooppisista CSS-pätkistä täysiverisiin tuotekierrosten kehyksiin?

Keräsimme 21 avoimen lähdekoodin lisäosaa työkaluvihjeille JavaScriptillä, jQueryllä ja puhtaalla CSS:llä, mukana live-kuvakaappaukset ja rehelliset erittelyt ominaisuuksista. Tässä työkalut joka tilanteeseen: nopea työkaluvihje laskeutumissivulle, HTML-sisältöä tukeva työkaluvihje verkkosovellukseen ja vaiheittainen perehdytys SaaS-palveluun.

💡 Pikakatsaus:

• Valitse kategoria: puhdas CSS, jQuery tai vanilla JS.
• Päätä, mitä sisälle tulee: vain tekstiä vai HTML:ää kuvineen ja painikkeineen.
• Tarkista automaattinen sijoittelu: jotta työkaluvihje ei karkaa ruudun reunan yli.
• Tuotekierroksiin ota Intro.js tai Hopscotch, ne on räätälöity perehdytykseen.

Yleiskatsaustaulukko: 21 lisäosaa 30 sekunnissa

1. Tippy.js

Tippy.js on de facto -standardi työkaluvihjeille modernissa frontendissä. Kehittäjä atomiksin kirjasto on rakennettu Popper.js:n (myöhemmin Floating UI) päälle ja tarjoaa virheettömän sijoittelun: työkaluvihje väistää itse ruudun reunoja, kääntyy ja mukautuu näkymään.

Sisältä löytyy kaikki, mitä vakavaan käyttöliittymään tarvitaan: animaatio CSS-siirtymillä, interaktiiviset työkaluvihjeet (sisältöä voi klikata ilman että vihje sulkeutuu), kursorin seuranta, sisäkkäiset työkaluvihjeet ja laiska renderöinti. Tukee Reactia, Vuta ja puhdasta DOMia.

Kokemuksemme mukaan Tippy.js:ään kannattaa siirtyä, kun projekti kasvaa ulos jQuery-viidakosta: kirjasto poistaa suurimman osan sijoittelun päänvaivasta ilman yhtäkään käsin kirjoitettua CSS-riviä.

Plussat: minimaalinen riippuvuuspuu, TypeScript-tyypitys valmiina, dokumentaatio live-esimerkein. Miinukset: ylimitoitettu yksinkertaiselle tekstityökaluvihjeelle laskeutumissivulla; bundle-koko ~30 KB (joskin tree-shaking auttaa).

🔗 Tippy.js GitHubissa🔗 Dokumentaatio ja demo

2. Tooltipster

Tooltipster on veteraani jQuery-työkaluvihjelisäosien joukossa, joka ei ole muuttunut kurpitsaksi. Kirjasto on toiminut vuodesta 2012 ja saa edelleen päivityksiä. Pääominaisuus on neljä valmista tyyliteemaa (default, light, borderless, punk) sekä mahdollisuus rakentaa omia CSS:n avulla.

Tooltipster käsittelee HTML-sisällön, AJAX-latauksen, useat triggerit (hover, click, focus, ohjelmallinen kutsu), näytä/piilota-ajastimet ja takaisinkutsut jokaiselle elinkaaren vaiheelle. Erillinen plussa on sisäänrakennettu tuki kosketuslaitteille: napautus elementtiin näyttää työkaluvihjeen, uusi napautus piilottaa sen.

Käytännössä Tooltipster sopii hyvin projekteihin WordPressissä ja jQuery-pinossa, joissa modernin bundlen hakeminen npm:stä on hankalaa: yhdistä vain skripti, määritä asetukset, ja kaikki title-attribuutilla varustetut linkit muuttuvat siisteiksi työkaluvihjeiksi.

Plussat: kypsä lisäosa, jolla on ennakoitava käyttäytyminen, erinomainen dokumentaatio, kosketustuki. Miinukset: sidottu jQueryyn (vuonna 2026 tämä on jo riippuvuus, jonka monet haluavat poistaa).

🔗 Tooltipster GitHubissa

3. CSS Tooltip

Minimalistinen työkaluvihje pelkällä CSS:llä: HTML-elementti, jolla on data-tooltip, pseudo-elementit ::before ja ::after nuolta ja taustaa varten sekä pehmeä siirtymä hoverissa. Ei JavaScriptiä, ei edes tapahtumankäsittelijöitä.

Ratkaisu sopii staattiseen sisältöön: blogit, dokumentaatio, laskeutumissivut. Painaa alle kilotavun, ei vaadi riippuvuuksia eikä vaikuta First Input Delay -arvoon. Kopioi vain CSS-pätkä projektiin ja lisää data-attribuutit.

Hyvää: nolla JS:ää, välitön suorituskyky, värien ja välistysten muokkaus helppoa. Huonoa: vain tekstiä, ei automaattista paikoitusta, rajallinen toiminta mobiilissa (ei hoveria).

4. Tipr

Tipr on pieni jQuery-liitännäinen (alle 2 kt minifoituna), joka tekee tasan yhden asian: näyttää ponnahdusvihjeen, kun hiiren vie minkä tahansa HTML-elementin päälle. Litteä muotoilu, ei päätteitä, minimaalinen konfigurointi data-attribuuteilla.

Ihanteellinen, kun tarvitset jotain "joka vain toimii" ilman turhia abstraktioita. Tukee neljää sijaintia, mukautettuja luokkia ja liipaisimen vaihtoa. Neuvomme on ottaa Tipr pieniin projekteihin, joissa jQuery on jo käytössä etkä halua lisätä erillistä riippuvuutta työkaluvihjeitä varten.

Hyvää: mikroskooppinen koko, yksinkertainen rajapinta, ei vaadi konfigurointia. Huonoa: tekijä hylännyt, alkeellinen paikoitus (voi leikkautua ruudun reunassa).

Tipr on saatavilla GitHubissa

5. CSS tooltip appear

Toinen puhdas CSS-toteutus, tällä kertaa painopisteenä ilmestymisanimaatio. Työkaluvihje liukuu esiin pehmeästi, ja kestoa sekä pehmennyskäyrää voi säätää. Sopii tilanteisiin, joissa toiminnallisuus ei ole yhtä tärkeää kuin visuaalinen vaikutelma: portfoliot, promosivut, esittelysivustot.

Hyvää: kaunis animaatio, puhdas CSS, ei skriptejä. Huonoa: vain tekstiä, ei paikoitusta ruudun reunoilla, ei interaktiivisuutta.

6. Grumble.js

Grumble.js erottuu visuaalisesti: työkaluvihje on tyylitelty sarjakuvakuplaksi ja voi pyöriä kohde-elementin ympäri 360 astetta yhden asteen välein. Kehittäjä James Cryer loi liitännäisen nimenomaan epästandardiin käyttöliittymään, jossa tavallinen suorakulmio näyttäisi vieraalta.

Liitännäistä ei ole päivitetty moneen vuoteen, mutta konseptina ja harrasteprojekteihin se on yhä kiinnostava. Emme laittaisi sitä tuotantoon elävään projektiin: vanhentunut jQuery-versio riippuvuuksissa eikä mobiilitukea.

Hyvää: ainutlaatuinen muotoilu, tarkka kulman hallinta, miellyttävä animaatio. Huonoa: ei tuettu, ikivanha jQuery, ei responsiivista suunnittelua.

🔗 Grumble.js GitHubissa

7. Protip

Protip on jQuery-liitännäinen, joka asemoi itsensä "työkaluvihjeeksi joka tilanteeseen." Useita ulkoasuja (mukaan lukien tumma teema), animoituja siirtymiä, neljä sijaintia ja HTML-tuki. Repositorion perusteella tekijä toteutti rajapinnan laajennettavuus edellä: asetuksia voi ketjuttaa ja määrittää yleiset oletusarvot.

Käytännössä Protip on vankka keskisarjan vaihtoehto jQuery-projekteihin. Ei yhtä tehokas kuin Tooltipster, mutta riittävä perusskenaarioihin.

Hyvää: useita teemoja, kätevä rajapinta, animaatio. Huonoa: repositoriota ei päivitetä, niukka dokumentaatio.

Protip on saatavilla GitHubissa

8. Tipped

Tipped on kevyt JavaScript-kirjasto ilman riippuvuuksia. Se tukee useita ulkoasuja, kokoja ja vuorovaikutustapoja: hover, klikkaus, fokus, manuaalinen kutsu. Sijoittelu on kiinteä (neljä sivua), ilman älykästä reunojen väistöä, mikä riittää yksinkertaisiin käyttöliittymiin.

Huomaa, että kirjastoa ei ole päivitetty pitkään aikaan ja yhteisön tuki on vähäistä. Vuonna 2026 uuteen projektiin suosittelisimme Tippy.js:ää, mutta jos projekti on jo Tippedillä ja toimii, ei vaihtamisessa ole järkeä.

Plussat: ei riippuvuuksia, yksinkertainen rajapinta, useita ulkoasuja. Miinukset: ei automaattista sijoittelua, projekti vaikuttaa hylätyltä.

Tipped on saatavilla GitHubissa

9. Microtip

Kehittäjä Indrashish Ghoshin Microtip on puhdas CSS-työkaluvihjekirjasto, joka painaa alle 1 kt gzipattuna. Saavutettavuus sisäänrakennettuna (aria-label + role="tooltip"), GPU-animaatio (transform top/left:n sijaan), responsiivinen fontti.

Suosikkiskenaariomme Microtipille ovat ikonit ilman nimilappuja hallintapaneelissa tai käyttöliittymässä: lisää aria-label, lisää luokka, ja käyttäjä saa vihjeen ilman yhtäkään JavaScript-riviä. Kirjasto on aktiivisessa käytössä GitHub-projekteissa (yli 3,5 tuhatta tähteä), vaikka suuria päivityksiä ei ole viime vuosina tullut.

Plussat: erittäin kevyt, saavutettavuusvalmis, ei hidasta renderöintiä. Miinukset: vain tekstiä, ei interaktiivisuutta, kiinteä sijainti.

🔗 Microtip GitHubissa

10. Auto Tooltips

Auto Tooltips on JavaScript-kirjasto, joka valitsee automaattisesti optimaalisen sijainnin työkaluvihjeelle käytettävissä olevan tilan mukaan. Toisin kuin Microtip tai CSS Tooltip, tässä vihje voi hypätä elementin toiselle puolelle, jos ruudun reunassa ei ole tarpeeksi tilaa.

Visuaalisesti tyylitellyt työkaluvihjeet, joissa on varjo ja pyöristetyt kulmat. Sijoittelulogiikka on kirjoitettu ilman ulkoisia riippuvuuksia, koko kirjasto mahtuu muutamaan kilotavuun.

Plussat: automaattinen sijoittelu, kevyt, tyylikäs muotoilu. Miinukset: repositorio ei ole aktiivinen, minimaalinen dokumentaatio.

11. JBox

JBox ei ole pelkkä työkaluvihje, vaan yleiskäyttöinen dialogikehys jQuerylle. Ponnahdusvihjeiden lisäksi se hoitaa modaali-ikkunat, ilmoitukset (notice) ja koko näytön peittävät overlayt. Jokainen dialogityyppi on erillinen liitännäinen yhteisen arkkitehtuurin sisällä.

Kokemuksemme mukaan JBox on hyvä projekteissa, joissa tarvitaan yhtenäinen visuaalinen tyyli kaikille ponnahduselementeille. Kirjasto tukee AJAX-sisältöä, animaatiota, takaisinkutsuja ja responsiivista sijoittelua. Koko on perusteltu toiminnallisuudella: noin 20 kt koko dialogikomponenttien sarjalle.

Plussat: neljä dialogityyppiä yhdessä paketissa, hyvä dokumentaatio, aktiivinen tuki. Miinukset: jQuery-riippuvuus, liioiteltu, jos tarvitset vain työkaluvihjeitä.

🔗 JBox GitHubissa

12. Wenk

Wenk (hindistä, "tulikärpänen") on CSS-työkaluvihjekirjasto, joka käyttää data-attribuutteja sijoitteluun. Voit asettaa sijainnin (data-wenk="left"), pituuden ja nuolen tyylin. Kaikki taika on puhtaassa CSS:ssä, plus valinnainen JS-tiedosto automaattista sijainnin valintaa varten.

Paino on noin 1,2 kt minifoituna. Erinomainen valinta, kun Microtip tuntuu liian minimalistiselta etkä halua vetää mukaan Tippy.js:ää.

Plussat: data-attribuutit sijainnille, kevyt JS-apuri, miellyttävä muotoilu. Miinukset: ei interaktiivisia työkaluvihjeitä, sijoittelu rajoitettu kahdeksaan suuntaan.

Wenk on saatavilla GitHubissa

13. Crumble

Crumble on overlay Grumble.js:n päälle, joka lisää kuplan "murenevan" efektin suljettaessa. Visuaalisesti kiinnostava konsepti, mutta kaksinkertainen riippuvuus (jQuery + Grumble.js) ja päivitysten täydellinen puuttuminen tekevät siitä yksinomaan historiallisen näyttelyesineen.

Otimme Crumblen mukaan kokoelmaan täydellisyyden ja visuaalisen monimuotoisuuden vuoksi, mutta oikeaan projektiin etsi elävämpiä vaihtoehtoja.

Plussat: ainutlaatuinen sulkeutumisanimaatio, herättää huomion. Miinukset: kaksi vanhentunutta riippuvuutta, ei tuotantokäyttöön.

🔗 Grumble.js (riippuvuus)

14. Intro.js

Intro.js ei ole enää työkaluvihje, vaan täysiverinen kehys käyttäjän perehdytykseen. Kirjastolla luot vaiheittaisia ohjeita: elementin korostus, ponnahdusikkuna selityksellä, "Seuraava"/"Valmis"-painikkeet. Ei riippuvuuksia, puhdasta JavaScriptiä.

Testissämme Intro.js osoittautui kypsimmäksi työkaluksi tuotekierroksille: yli 23 tuhatta tähteä GitHubissa, TypeScript-koodipohja, tuki monisivuisille kierroksille (tilan siirrolla sivujen välillä), muokkaus CSS-luokkien ja takaisinkutsujen kautta jokaiselle vaiheelle.

Plussat: de facto -standardi perehdytyskierroksille, aktiivinen kehitys, yksityiskohtainen dokumentaatio. Miinukset: noin 45 kt, perusteltu toiminnallisuudella, mutta liioiteltu yksinkertaiselle työkaluvihjeelle.

🔗 Intro.js GitHubissa🔗 Live-demo

15. PowerTip

Steven Bennerin (jQuery QueryBuilderin tekijä) PowerTip tuo kiinnostavan konseptin: sääntöjärjestelmä takaa, että ruudulla näkyy kerrallaan vain yksi työkaluvihje. Tämä ratkaisee klassisen ongelman, jossa käyttäjä liikuttaa kursorin nopeasti usean elementin yli ja saa aikaan sekamelskan päällekkäisiä vihjeitä.

Lisäosa tukee monimutkaista merkintää työkaluvihjeen sisällä (mukaan lukien AJAX-sisältö), mukautettuja laukaisimia ja sijoittelua kahdeksaan suuntaan. jQuery-projekteissa PowerTip on yksi luotettavimmista vaihtoehdoista.

Plussat: älykäs näyttöjärjestelmä, HTML-sisältö, vakaa toiminta. Miinukset: jQuery-riippuvuus, repositorio saa harvoin päivityksiä.

🔗 PowerTip GitHubissa

16. Toolbar.js

Paul Kinzettin Toolbar.js on "työkaluvihje työkalupalkkina" -lähestymistapa: ponnahdusikkuna ei sisällä pelkkää tekstiä, vaan painikkeita, kuvakkeita ja linkkejä. Tyypillinen skenaario on, kun valitset tekstiä sivulta ja esiin tulee paneeli, jossa on "Kopioi"-, "Jaa"- ja "Hae"-painikkeet.

Lisäosa käyttää sijoitteluun Popper.js:ää, mikä takaa oikean toiminnan ruudun reunoilla. Projekti keräsi yli 2,3 tuhatta tähteä, mutta merkittäviä päivityksiä ei ole tullut viime vuosina. Konseptiltaan Toolbar.js vaikutti moniin nykyaikaisiin käyttöliittymämalleihin (Medium-tyyliset valintapaneelit).

Plussat: ainutlaatuinen "työkaluvihje toimintopaneelina" -lähestymistapa, hyvä sijoittelu. Miinukset: projekti jäädytetty, sidottu vanhaan Popper.js-versioon.

🔗 Toolbar.js GitHubissa

17. Simptip

Simptip on CSS-työkaluvihjekirjasto, joka on kirjoitettu Sassilla käyttäen mixinejä ja muuttujia. Tämä tekee siitä kätevän projekteissa, joissa työkaluvihjeen ulkoasun on vastattava tarkasti design-järjestelmää: vaihda $bg-color-muuttuja, ja kaikki työkaluvihjeet värjäytyvät uudelleen.

Kirjasto tukee pehmeitä ja teräviä nuolia, neljää sijaintia ja ilmestymistehostetta (häivytys). Koko on minimaalinen: käännetty CSS on noin 2 kt.

Plussat: Sass-muuttujat mukauttamiseen, siisti muotoilu, kevyt. Miinukset: ei HTML-sisältöä, projektia ei päivitetä.

🔗 Simptip GitHubissa

18. HubSpot Tooltip

HubSpot avasi sisäisen työkaluvihjekirjastonsa lähdekoodin, se on rakennettu Tetherin (sijoittelumoottori, Popper.js:n edeltäjä) ja Dropin (kirjasto pudotusvalikkoelementeille) päälle. Yhdistelmä tarjoaa tehokkaan, joustavan työkaluvihjejärjestelmän automaattisella sijoittelulla.

Nykyään HubSpot Tooltip on lähinnä historiallisesti kiinnostava: kirjastoa ei päivitetä, Tether korvattiin virallisesti Popper.js:llä (ja myöhemmin Floating UI:lla). HubSpotin arkkitehtuuriset ratkaisut vaikuttivat kuitenkin nykyaikaisiin kirjastoihin, itse "sijoittelumoottori + näyttömoottori" -lähestymistavasta tuli standardi.

Plussat: teollisen tason koodinlaatu, hyvä sijoittelu, HTML-tuki. Miinukset: vanhentuneet riippuvuudet (Tether), projekti jäädytetty.

🔗 HubSpot Tooltip GitHubissa

19. Hopscotch

Hopscotch on toinen tuote-esittelykierrosten luontiin tarkoitettu framework Intro.js:n jälkeen. Lähestymistapa on erilainen: DOM-elementtien ketjun sijaan kuvaat kierroksen JSON-objektina (askeleet, kohteet, sisältö), ja kirjasto hoitaa renderöinnin ja navigoinnin itse. Tukee monisivuisia kierroksia: käyttäjä seuraa linkkiä ja kierros jatkuu samasta askeleesta.

Projekti on siirtynyt broccolijs-archive-organisaation suojiin ja on jäädytetty. Uuteen tuotteeseen suosittelemme Intro.js:ää, mutta jos ylläpidät vanhaa koodia, jossa on Hopscotch, se toimii edelleen ja on dokumentoitu.

Plussat: JSON-pohjainen kierroksen kuvaus, monisivutuki, kypsä rajapinta. Miinukset: projekti arkistoitu, ei uusia ominaisuuksia.

Hopscotch GitHubissa (projekti arkistoitu)

20. Darktooltip

Darktooltip on jQuery-liitännäinen, jossa on kiinteä tumma muotoilu, HTML-sisällön tuki ja ilmestymisanimaatio. Rajapinta on yksinkertainen: kutsu .darktooltip() elementille, anna asetukset, valmista. Sopii pieniin vimpaimiin ja hallintapaneeleihin, joissa tarvitaan nopea, yhdenmukainen työkaluvihje ilman CSS:n kanssa säätämistä.

Kokemuksemme mukaan Darktooltip on niche-työkalu: jos tumma teema sopii designiin, se toimii hyvin; jos tarvitset värien mukautusta, on helpompi ottaa Tooltipster tai Tippy.js.

Plussat: yksinkertainen rajapinta, HTML-sisältö, miellyttävä animaatio. Miinukset: vain tumma teema, jQuery-riippuvuus, projekti ei aktiivinen.

🔗 Darktooltip GitHubissa

21. Tipso

Tipso päättää kokoelman miellyttävänä, kevyenä jQuery-liitännäisenä, jossa on CSS3-animaatio. Responsiivinen muotoilu suoraan laatikosta (työkaluvihje muuttaa kokoa mobiilissa), useita liipaisimia ja sijainteja, HTML-tuki. Huomioi erikseen, että Tipsosta on olemassa liitännäinen WordPressille, mikä voi olla kätevää WordPress-sivuston omistajille, jotka eivät halua koskea koodiin.

Kirjastoa ei ole päivitetty useaan vuoteen, mutta koodipohja on vakaa eikä siinä ole kriittisiä bugeja. Yksinkertaisiin jQuery-projekteihin toimiva vaihtoehto.

Plussat: responsiivisuus, WordPress-versio, miellyttävä animaatio. Miinukset: ei päivitetä, sidottu jQueryyn.

🔗 Tipso GitHubissa

Miten testasimme ja miten valitset oman työkaluvihjeesi

Ajoimme jokaisen liitännäisen läpi saman tarkistuslistan: latautuminen tyhjälle sivulle, renderöinti näytön reunassa, käyttäytyminen nopeissa hover-vaihdoissa, mobiilitaputus, värien/fonttien mukautus. Yllä olevan taulukon arviot eivät ole abstrakteja "tähtiä", vaan suoria tuloksia näistä testeistä.

Nopeaa valintaa varten pidä mielessä tämä täsmäysmatriisi:

• Laskeutumissivu, blogi, dokumentaatio → Microtip tai Wenk. Puhdasta CSS:ää, välitön lataus, ei mitään ylimääräistä.
• Hallintapaneeli jQueryllä, WordPress-sivusto → Tooltipster. Kypsä, vakaa, kosketustuella.
• Moderni verkkosovellus, React/Vue → Tippy.js. Markkinoiden paras paikoitus, TypeScript, aktiivinen kehitys.
• Valintaikkunat + työkaluvihjeet + ilmoitukset yhdessä paketissa → JBox. Yhtenäinen tyyli kaikille popupeille.
• Tuote-esittelykierros, perehdytys, vaiheittaiset ohjeet → Intro.js. Alan standardi, 23 000+ tähteä, monisivuiset kierrokset.

Testeistä johdettu yleissääntö: jos olet epävarma, ota Tippy.js. Se kattaa valtaosan skenaarioista, ei vedä mukanaan jQueryä ja ratkaisee paikoitusongelman kerralla. Ja jos projekti on jo jQueryn päällä eikä migraatioon ole budjetoitu, Tooltipster ei petä.

Video: miten luot kauniin työkaluvihjeen pelkällä CSS:llä

Nähdäksesi työkaluvihjeet toiminnassa, katso tämä AlgoKagen opastusvideo, 10 minuutissa rakennat tyylikkään popup-vihjeen ilman yhtäkään JavaScript-riviä:

⁉️🤔 Usein kysytyt kysymykset

Tarvitaanko työkaluvihjeisiin JavaScriptiä?

Ei välttämättä. Yksinkertaiseen tekstityökaluvihjeeseen työpöydällä CSS riittää (Microtip, Wenk, Simptip). Mutta jos tarvitset HTML-sisältöä, automaattista paikoitusta näytön reunoilla, klikkausliipaisinta tai mobiilitukea, et pärjää ilman JavaScriptiä. Tippy.js ja Tooltipster kattavat nämä skenaariot.

Kuinka tärkeää saavutettavuus (a11y) on työkaluvihjeissä?

Kriittisen tärkeää. Ruudunlukijan käyttäjien on saatava työkaluvihjeen teksti ilman kursorin vientiä päälle. Oikea lähestymistapa: käytä aria-describedby-attribuuttia liipaisimessa ja role="tooltip"-attribuuttia itse työkaluvihjeessä. Tippy.js ja Microtip tukevat tätä suoraan laatikosta. Jos kirjoitat omaa työkaluvihjettä, älä sivuuta WAI-ARIAa.

Miten Tippy.js on parempi kuin vanha Tooltipster?

Tippy.js ei riipu jQuerystä, on kirjoitettu TypeScriptillä, käyttää Floating UI:ta paikoitukseen (työkaluvihje pysyy aina näkymässä) ja tukee tree-shakingia. Tooltipster on kypsä ja vakaa, mutta jQuery-riippuvuus vuonna 2026 ei ole toivottava uusissa projekteissa. Jos sinulla on jo jQuery-pino, Tooltipster on erinomainen valinta; jos aloitat puhtaalta pöydältä, Tippy.js.

Voiko yhdellä sivustolla käyttää useampaa työkaluvihjekirjastoa?

Teknisesti kyllä, mutta käytännössä tämä aiheuttaa tyyliristiriitoja, koodin toistoa ja debuggauksen sekavuutta. Poikkeuksena on Microtip kuvakkeille + Intro.js tuote-esittelykierrokselle: niiden vastuualueet eivät mene päällekkäin. Yleisesti ottaen valitse yksi kirjasto pääskenaarioon.

Miksi työkaluvihjeet leikkautuvat mobiilissa?

Mobiililaitteissa ei ole hoveria, ja niiden näkymä on kapea. Työkaluvihjeet, jotka näkyvät työpöydällä elementin oikealla puolella, voivat mennä ruudun ulkopuolelle mobiilissa. Ratkaisu: joko responsiivinen sijainti (Tippy.js osaa valita puolen automaattisesti) tai työkaluvihjeen korvaaminen klikattavalla popoverilla mobiilissa.

Pitäisikö Grumble.js:ää tai Crumblea käyttää oikeassa projektissa?

Ei. Kumpaakaan kirjastoa ei ole päivitetty yli 10 vuoteen, ja ne riippuvat vanhentuneesta jQuery-versiosta. Visuaalisesti ne ovat kiinnostavia konsepteina, mutta tuotantoon ota modernit vastineet: Tippy.js räätälöidyllä teemalla voi imitoida mitä tahansa visuaalista tyyliä ilman vanhentuneita riippuvuuksia.

Mikä työkaluvihjeliitännäinen valita vuonna 2026?

Kaksikymmentäyksi liitännäistä on paljon valinnanvaraa, mutta todella universaaleja niistä on kolme: Microtip ultrakevyisiin CSS-vihjeisiin, Tooltipster jQuery-projekteihin ja Tippy.js kaikkeen muuhun. Intro.js on erillinen tapaus, se ei ole työkaluvihje vaan perehdytyksen framework, ja omassa nichesään se on paras.

Loput kahdeksantoista ovat joko niche-työkaluja tiettyyn designiin (Darktooltip, Simptip), historiallisia artefakteja, jotka vaikuttivat alaan (Grumble.js, HubSpot Tooltip), tai vakaita mutta jäädytettyjä projekteja, jotka yhä toimivat, vaikka uuteen koodiin onkin parempi ottaa jotain elävää.

Jos luit tänne asti, kokoelma täytti tehtävänsä: nyt tiedät, mikä liitännäinen projektiisi kannattaa ottaa. Ota se ja kokeile, kaikki linkit dokumentaatioon ja repositorioihin ovat kunkin työkalun kuvauksessa.