Et verktøytips, et lite grensesnittelement som enten redder brukeren eller irriterer dem grenseløst. Du holder markøren over et ikon, forventer et hint, og får i stedet: en tom firkant, avkortet tekst, eller en popup som har krabbet ut av skjermkanten.

Å skrive verktøytips fra bunnen av for hånd betyr å kjempe med posisjonering, z-indeks, responsivt design og animasjon. Ferdige biblioteker løser alt dette med et par linjer kode. Men hvilket skal man velge når markedet har dusinvis av alternativer, fra mikroskopiske CSS-snutter til fullverdige rammeverk for produktomvisninger?

Vi samlet 21 åpen kildekode-plugins for verktøytips i JavaScript, jQuery og ren CSS, med levende skjermbilder og ærlige vurderinger av funksjonalitet. Her er verktøy for ethvert scenario: et raskt verktøytips for en landingsside, et verktøytips med HTML-innhold for en webapplikasjon, og trinnvis onboarding for SaaS.

💡 Rask oversikt:

• Velg en kategori: ren CSS, jQuery eller vanilla JS.
• Bestem hva som skal være inni: kun tekst eller HTML med bilder og knapper.
• Sjekk autoposisjonering: slik at verktøytipset ikke går utenfor skjermkanten.
• For produktomvisninger, bruk Intro.js eller Hopscotch, de er skreddersydd for onboarding.

Oversiktstabell: 21 plugins på 30 sekunder

1. Tippy.js

Tippy.js er de facto-standarden for verktøytips i moderne frontend. Biblioteket fra utvikleren atomiks er bygget på toppen av Popper.js (senere Floating UI) og gir feilfri posisjonering: verktøytipset unngår skjermkantene på egen hånd, snur og tilpasser seg visningsområdet.

Inni finner du alt du trenger for seriøst UI: animasjon via CSS-overganger, interaktive verktøytips (du kan klikke på innholdet uten at det lukkes), markørsporing, nestede verktøytips og lat rendering. Støtter React, Vue og ren DOM.

Etter vår erfaring bør du bytte til Tippy.js når et prosjekt vokser ut av jQuery-zooen: biblioteket fjerner det meste av hodepinen med posisjonering uten en eneste linje manuell CSS.

Fordeler: minimalt avhengighetstre, TypeScript-typing ut av boksen, dokumentasjon med levende eksempler. Ulemper: overkill for et enkelt tekstverktøytips på en landingsside; pakkestørrelse ~30 KB (selv om tree-shaking hjelper).

🔗 Tippy.js på GitHub🔗 Dokumentasjon og demo

2. Tooltipster

Tooltipster er en veteran blant jQuery-plugins for verktøytips som ikke har blitt til en gresskarpai. Biblioteket har fungert siden 2012 og mottar fortsatt oppdateringer. Hovedfunksjonen er fire ferdige stiltemaer (default, light, borderless, punk) pluss muligheten til å bygge ditt eget via CSS.

Tooltipster håndterer HTML-innhold, AJAX-lasting, flere utløsere (hover, klikk, fokus, programmatisk kall), vis/skjul-tidsur og tilbakeringinger for hvert livssyklussteg. Et eget pluss er innebygd støtte for berøringsenheter: trykk på et element viser verktøytipset, gjentatt trykk skjuler det.

I praksis passer Tooltipster godt inn i prosjekter på WordPress og jQuery-stakken, der det er upraktisk å dra inn en moderne pakke fra npm: bare koble til skriptet, konfigurer alternativer, så blir alle lenker med title til fine verktøytips.

Fordeler: moden plugin med forutsigbar oppførsel, utmerket dokumentasjon, berøringsstøtte. Ulemper: bundet til jQuery (i 2026 er dette allerede en avhengighet mange ønsker å fjerne).

🔗 Tooltipster på GitHub

3. CSS Tooltip

Minimalistisk tooltip i ren CSS: et HTML-element med data-tooltip, pseudo-elementene ::before og ::after for pilen og bakgrunnen, pluss en myk overgang ved hover. Ikke noe JavaScript, ikke engang hendelseshåndterere er nødvendig.

Løsningen passer for statisk innhold: blogger, dokumentasjon, landingssider. Veier under en kilobyte, krever ingen avhengigheter og påvirker ikke First Input Delay. Bare kopier CSS-snutten inn i prosjektet og plasser data-attributter.

Fordeler: null JS, umiddelbar ytelse, enkelt å tilpasse farger og avstander. Ulemper: kun tekst, ingen automatisk posisjonering, begrenset oppførsel på mobil (ingen hover).

4. Tipr

Tipr er en liten jQuery-plugin (under 2 KB minifisert) som gjør nøyaktig én ting: viser en popup-tooltip når du holder musepekeren over et HTML-element. Flatt design, ingen seriffer, minimal konfigurasjon via data-attributter.

Ideell når du trenger at det «bare skal fungere» uten unødvendige abstraksjoner. Støtter fire posisjoner, egendefinerte klasser og bytte av utløser. Vårt råd er å bruke Tipr til små prosjekter der jQuery allerede finnes og du ikke vil legge til en separat avhengighet for tooltips.

Fordeler: mikroskopisk størrelse, enkelt API, krever ingen konfigurasjon. Ulemper: forlatt av forfatteren, primitiv posisjonering (kan bli kuttet i skjermkanten).

Tipr er tilgjengelig på GitHub

5. CSS tooltip appear

Nok en ren CSS-implementasjon, denne gangen med vekt på animert tilsynekomst. Tooltipen glir jevnt ut, med tilpassbar varighet og easing-kurve. Passer for situasjoner der funksjon ikke er like viktig som visuelt inntrykk: porteføljer, promo-sider, presentasjonsnettsteder.

Fordeler: vakker animasjon, ren CSS, ingen skript. Ulemper: kun tekst, ingen posisjonering ved skjermkanter, ingen interaktivitet.

6. Grumble.js

Grumble.js skiller seg visuelt ut: tooltipen er stilisert som en tegneserieboble og kan rotere rundt målelementet 360 grader i trinn på 1°. Utvikler James Cryer laget pluginen spesielt for ikke-standard brukergrensesnitt der et vanlig rektangel ville sett malplassert ut.

Pluginen har ikke blitt oppdatert på mange år, men som konsept og for hobbyprosjekter er den fortsatt interessant. Vi ville ikke satt den i produksjon på et levende prosjekt: utdatert jQuery-versjon i avhengighetene og ingen mobilstøtte.

Fordeler: unikt design, presis vinkelkontroll, behagelig animasjon. Ulemper: ikke støttet, gammel jQuery, ikke responsivt design.

🔗 Grumble.js på GitHub

7. Protip

Protip er en jQuery-plugin som posisjonerte seg som «en tooltip for enhver situasjon». Flere skinn (inkludert mørkt tema), animerte overganger, fire posisjoner og HTML-støtte. Basert på kodebasen implementerte forfatteren et API med fokus på utvidbarhet: du kan kaskade innstillinger og sette globale standardverdier.

I praksis er Protip et solid mellomnivå-alternativ for jQuery-prosjekter. Ikke like kraftig som Tooltipster, men tilstrekkelig for grunnleggende scenarioer.

Fordeler: flere temaer, praktisk API, animasjon. Ulemper: kodebasen ikke oppdatert, sparsommelig dokumentasjon.

Protip er tilgjengelig på GitHub

8. Tipped

Tipped er et lettvekts JavaScript-bibliotek uten avhengigheter. Støtter flere skall, størrelser og interaksjonsvarianter: hover, klikk, fokus, manuelt kall. Posisjonering er fast (fire sider), uten smart unngåelse av kanter, for enkle grensesnitt er dette nok.

Merk at biblioteket ikke har vært oppdatert på lenge, og community-støtten er minimal. I 2026, for et nytt prosjekt, ville vi anbefalt Tippy.js, men hvis prosjektet allerede er på Tipped og fungerer, er det ingen grunn til å bytte.

Fordeler: ingen avhengigheter, enkelt API, flere skall. Ulemper: ingen auto-posisjonering, prosjektet virker forlatt.

Tipped er tilgjengelig på GitHub

9. Microtip

Microtip fra utvikler Indrashish Ghosh er et rent CSS-basert tooltip-bibliotek som veier under 1 KB gzippet. Tilgjengelighet ut av boksen (aria-label + role="tooltip"), GPU-animasjon (transform i stedet for top/left), responsiv font.

Vårt favorittscenario for Microtip er ikoner uten etiketter i et adminpanel eller grensesnitt: heng på aria-label, legg til en klasse, så får brukeren et hint uten en eneste linje JavaScript. Biblioteket er aktivt brukt i prosjekter på GitHub (3,5k+ stjerner), selv om det ikke har vært store oppdateringer de siste par årene.

Fordeler: ultra-lettvekt, tilgjengelighetsklar, bremser ikke renderingen. Ulemper: kun tekst, ingen interaktivitet, fast posisjon.

🔗 Microtip på GitHub

10. Auto Tooltips

Auto Tooltips er et JavaScript-bibliotek som automatisk velger den optimale posisjonen for et tooltip avhengig av tilgjengelig plass. I motsetning til Microtip eller CSS Tooltip, kan hintet her hoppe til en annen side av elementet hvis det ikke er nok plass ved skjermkanten.

Visuelt, stylede tooltips med skygge og avrundede hjørner. Posisjoneringslogikken er skrevet uten eksterne avhengigheter, hele biblioteket får plass i noen få kilobyte.

Fordeler: automatisk posisjonering, lettvekt, stilig design. Ulemper: repository inaktivt, minimal dokumentasjon.

11. JBox

JBox er ikke bare et tooltip, men et universelt dialogrammeverk på jQuery. Foruten popup-hint håndterer det modale vinduer, varsler (notice) og fullskjermsoverlegg. Hver dialogtype er en separat plugin innenfor en felles arkitektur.

Etter vår erfaring er JBox bra i prosjekter der du trenger en enhetlig visuell stil for alle popup-elementer. Biblioteket støtter AJAX-innhold, animasjon, callbacks og responsiv posisjonering. Størrelsen er rettferdiggjort av funksjonaliteten: ~20 KB for et komplett sett med dialogkomponenter.

Fordeler: fire dialogtyper i én pakke, god dokumentasjon, aktiv støtte. Ulemper: jQuery-avhengighet, overdrevent hvis du bare trenger tooltips.

🔗 JBox på GitHub

12. Wenk

Wenk (fra hindi, «ildflue») er et CSS-tooltip-bibliotek som bruker data-attributter for posisjonering. Du kan angi posisjon (data-wenk="left"), lengde og pilstil. All magien ligger i ren CSS, pluss en valgfri JS-fil for automatisk posisjonsvalg.

Vekten er omtrent 1,2 KB minifisert. Utmerket valg når Microtip virker for minimalistisk og du ikke vil dra inn Tippy.js.

Fordeler: data-attributter for posisjon, lettvekts JS-hjelper, behagelig design. Ulemper: ingen interaktive tooltips, posisjonering begrenset til åtte retninger.

Wenk er tilgjengelig på GitHub

13. Crumble

Crumble er et overlegg på Grumble.js, som legger til en boble-«smuldre»-effekt ved lukking. Visuelt interessant konsept, men dobbel avhengighet (jQuery + Grumble.js) og fullstendig fravær av oppdateringer gjør det utelukkende til en historisk kuriositet.

Vi inkluderte Crumble i samlingen for fullstendighet og visuelt mangfold, men for et reelt prosjekt, se etter mer levende alternativer.

Fordeler: unik lukkeanimasjon, tiltrekker oppmerksomhet. Ulemper: to utdaterte avhengigheter, ikke for produksjon.

🔗 Grumble.js (avhengighet)

14. Intro.js

Intro.js er ikke lenger et tooltip, men et fullverdig rammeverk for brukeropplæring. Med biblioteket lager du steg-for-steg-instruksjoner: utheving av elementer, popup-vindu med forklaring, «Neste»/«Ferdig»-knapper. Ingen avhengigheter, ren JavaScript.

I vår test viste Intro.js seg som det mest modne verktøyet for produktomvisninger: 23k+ stjerner på GitHub, TypeScript-kodebase, støtte for flerside-omvisninger (med tilstandsoverføring mellom sider), tilpasning via CSS-klasser og callbacks for hvert steg.

Fordeler: de facto standard for onboarding-omvisninger, aktiv utvikling, detaljert dokumentasjon. Ulemper: ~45 KB, rettferdiggjort av funksjonalitet, men overdrevent for et enkelt tooltip.

🔗 Intro.js på GitHub🔗 Live-demonstrasjon

15. PowerTip

PowerTip fra Steven Benner (forfatteren av jQuery QueryBuilder) bringer et interessant konsept: et regelsystem garanterer at kun ett tooltip er synlig på skjermen om gangen. Dette løser det klassiske problemet når en bruker raskt beveger markøren over flere elementer og får et rot av overlappende hint.

Pluginen støtter kompleks markup inne i tooltipet (inkludert AJAX-innhold), egendefinerte utløsere og posisjonering i åtte retninger. I jQuery-prosjekter er PowerTip et av de mest pålitelige alternativene.

Fordeler: smart visningssystem, HTML-innhold, stabil drift. Ulemper: jQuery-avhengighet, depotet får sjeldne oppdateringer.

🔗 PowerTip på GitHub

16. Toolbar.js

Toolbar.js fra Paul Kinzett er en «tooltip som verktøylinje»-tilnærming: popup-vinduet inneholder ikke bare tekst, men knapper, ikoner, lenker. Et typisk scenario er at du markerer tekst på en side, og et panel dukker opp med «Kopier», «Del», «Søk»-knapper.

Pluginen bruker Popper.js for posisjonering, noe som garanterer korrekt oppførsel ved skjermkanter. Prosjektet samlet 2,3k+ stjerner, men det har ikke vært store oppdateringer de siste årene. Konseptuelt påvirket Toolbar.js mange moderne UI-mønstre (Medium-lignende markeringspaneler).

Fordeler: unik «tooltip som handlingspanel»-tilnærming, god posisjonering. Ulemper: prosjektet er frosset, knyttet til gammel Popper.js-versjon.

🔗 Toolbar.js på GitHub

17. Simptip

Simptip er et CSS-tooltip-bibliotek skrevet i Sass med bruk av mixins og variabler. Dette gjør det praktisk for prosjekter der tooltip-utseendet må matche designsystemet nøyaktig: endre $bg-color-variabelen, så får alle tooltips ny farge.

Biblioteket støtter myke og skarpe piler, fire posisjoner og en visningseffekt (fade-in). Vekten er minimal: kompilert CSS er omtrent 2 KB.

Fordeler: Sass-variabler for tilpasning, pen design, lettvekt. Ulemper: ikke HTML-innhold, prosjektet ikke oppdatert.

🔗 Simptip på GitHub

18. HubSpot Tooltip

HubSpot åpnet kildekoden til sitt interne tooltip-bibliotek, det er bygget på toppen av Tether (posisjoneringsmotor, forgjengeren til Popper.js) og Drop (bibliotek for nedtrekkselementer). Kombinasjonen gir et kraftfullt, fleksibelt tooltip-system med auto-posisjonering.

Nå er HubSpot Tooltip mer av historisk interesse: biblioteket oppdateres ikke, Tether ble offisielt erstattet med Popper.js (og deretter med Floating UI). Likevel påvirket HubSpots arkitektoniske beslutninger moderne biblioteker, selve tilnærmingen «posisjoneringsmotor + visningsmotor» ble standard.

Fordeler: industriell kodekvalitet, god posisjonering, HTML-støtte. Ulemper: utdaterte avhengigheter (Tether), prosjektet er frosset.

🔗 HubSpot Tooltip på GitHub

19. Hopscotch

Hopscotch er det andre rammeverket etter Intro.js for å lage produktomvisninger. Tilnærmingen er annerledes: i stedet for en kjede av DOM-elementer beskriver du omvisningen som et JSON-objekt (steg, mål, innhold), og biblioteket håndterer rendering og navigasjon selv. Støtter omvisninger over flere sider, brukeren følger en lenke og omvisningen fortsetter fra samme steg.

Prosjektet flyttet under vingene til broccolijs-archive-organisasjonen og er frosset. For et nytt produkt anbefaler vi Intro.js, men hvis du vedlikeholder eldre kode med Hopscotch, fungerer det fortsatt og er dokumentert.

Fordeler: JSON-beskrivelse av omvisning, støtte for flere sider, modent API. Ulemper: prosjektet er arkivert, ingen nye funksjoner.

Hopscotch på GitHub (prosjektet er arkivert)

20. Darktooltip

Darktooltip er en jQuery-plugin med fast mørk design, støtte for HTML-innhold og animasjon ved visning. API-et er enkelt: kall .darktooltip() på et element, send med alternativer, ferdig. Egnet for små widgeter og adminpaneler der du trenger et raskt, konsistent tooltip uten å styre med CSS.

Etter vår erfaring er Darktooltip et nisjeverktøy: hvis det mørke temaet passer designet, fungerer det bra; hvis du trenger fargetilpasning, er det enklere å bruke Tooltipster eller Tippy.js.

Fordeler: enkelt API, HTML-innhold, behagelig animasjon. Ulemper: kun mørkt tema, jQuery-avhengighet, prosjektet er inaktivt.

🔗 Darktooltip på GitHub

21. Tipso

Tipso avslutter samlingen som en behagelig, lett jQuery-plugin med CSS3-animasjon. Responsivt design ut av boksen (tooltip endrer størrelse på mobil), flere utløsere og posisjoner, HTML-støtte. Legg spesielt merke til at Tipso finnes som en plugin for WordPress, dette kan være praktisk for WordPress-eiere som ikke vil inn i koden.

Biblioteket har ikke blitt oppdatert på flere år, men kodebasen er stabil og har ingen kritiske feil. For enkle jQuery-prosjekter er det et brukbart alternativ.

Fordeler: responsivitet, WordPress-versjon, behagelig animasjon. Ulemper: ikke oppdatert, knyttet til jQuery.

🔗 Tipso på GitHub

Hvordan vi testet, og hvordan du velger ditt tooltip

Vi kjørte hver plugin gjennom den samme sjekklisten: lasting på en tom side, rendering ved skjermkanten, oppførsel ved raske hover-endringer, trykk på mobil, farge-/fonttilpasning. Rangeringene i tabellen over er ikke abstrakte «stjerner», men direkte resultater av disse testene.

For raskt valg, hold deg til denne matrisen:

• Landingsside, blogg, dokumentasjon → Microtip eller Wenk. Ren CSS, øyeblikkelig lasting, ikke noe ekstra.
• Adminpanel på jQuery, WordPress-side → Tooltipster. Modent, stabilt, med berøringsstøtte.
• Moderne webapplikasjon, React/Vue → Tippy.js. Beste posisjonering på markedet, TypeScript, aktiv utvikling.
• Dialogvinduer + tooltips + varsler i én pakke → JBox. Enhetlig stil for alle popups.
• Produktomvisning, onboarding, steg-for-steg-instruksjoner → Intro.js. Bransjestandard, 23k+ stjerner, omvisninger over flere sider.

Generell regel vi utledet fra testene: hvis du er i tvil, velg Tippy.js. Det dekker de aller fleste scenarier, drar ikke inn jQuery, og løser posisjoneringsproblemet en gang for alle. Og hvis prosjektet allerede er på jQuery og det ikke er satt av budsjett til migrering, vil ikke Tooltipster svikte deg.

Video: hvordan lage et vakkert tooltip i ren CSS

For å se tooltips i aksjon, se denne veiledningen fra AlgoKage, på 10 minutter bygger du et stilig popup-hint uten en eneste linje JavaScript:

⁉️🤔 Ofte stilte spørsmål

Trengs JavaScript for tooltips?

Ikke påkrevd. For et enkelt tekst-tooltip på desktop er CSS nok (Microtip, Wenk, Simptip). Men hvis du trenger HTML-innhold, automatisk posisjonering ved skjermkanter, klikkutløser eller mobilstøtte, kommer du ikke utenom JavaScript. Tippy.js og Tooltipster dekker disse scenariene.

Hvor viktig er universell utforming (UU) i tooltips?

Kritisk. Brukere av skjermleser må få tooltip-teksten uten å føre markøren over. Riktig tilnærming: bruk aria-describedby på utløseren og role="tooltip" på selve tooltipet. Tippy.js og Microtip støtter dette ut av boksen. Hvis du skriver ditt eget tooltip, ikke ignorer WAI-ARIA.

Hvordan er Tippy.js bedre enn gamle Tooltipster?

Tippy.js er ikke avhengig av jQuery, skrevet i TypeScript, bruker Floating UI for posisjonering (tooltip forblir alltid innenfor visningsområdet), og støtter tree-shaking. Tooltipster er modent og stabilt, men jQuery-avhengighet i 2026 er uønsket for nye prosjekter. Hvis du allerede har en jQuery-stakk, er Tooltipster et utmerket valg; hvis du starter fra bunnen av, Tippy.js.

Kan man bruke flere tooltip-biblioteker på ett nettsted?

Teknisk sett ja, men i praksis skaper dette stilkonflikter, kodeduplisering og forvirring ved feilsøking. Unntaket er Microtip for ikoner + Intro.js for produktomvisning: deres ansvarsområder overlapper ikke. Generelt, velg ett bibliotek for hovedscenariet.

Hvorfor blir tooltips kuttet av på mobil?

Mobile enheter har ikke hover, og visningsområdet deres er smalt. Tooltips som vises til høyre for et element på desktop kan havne utenfor skjermen på mobil. Løsning: enten responsiv posisjon (Tippy.js kan automatisk velge side), eller erstatt tooltipet med en klikkbar popover for mobil.

Bør man bruke Grumble.js eller Crumble i et reelt prosjekt?

Nei. Begge bibliotekene har ikke blitt oppdatert på mer enn 10 år og er avhengige av en utdatert jQuery-versjon. Visuelt er de interessante som konsepter, men for produksjon, ta moderne analoger: Tippy.js med et tilpasset tema kan imitere enhver visuell stil uten utdaterte avhengigheter.

Hvilken tooltip-plugin å velge i 2026?

Tjueen plugins er mye å velge mellom, men virkelig universelle blant dem er tre: Microtip for ultralette CSS-hint, Tooltipster for jQuery-prosjekter, og Tippy.js for alt annet. Intro.js står i en særstilling, det er ikke et tooltip men et rammeverk for onboarding, og i sin nisje er det best.

De resterende atten er enten nisjeverktøy for spesifikk design (Darktooltip, Simptip), eller historiske artefakter som påvirket bransjen (Grumble.js, HubSpot Tooltip), eller solide, men frosne prosjekter som fortsatt fungerer, selv om det for ny kode er bedre å ta noe levende.

Hvis du har lest helt hit, har samlingen oppfylt sin oppgave: nå vet du hvilken plugin du skal ta for ditt prosjekt. Ta den og prøv, alle lenker til dokumentasjon og repositorier er i beskrivelsen av hvert verktøy.