Ett tooltip, ett litet gränssnittselement som antingen räddar användaren eller irriterar dem till vansinne. Du för muspekaren över en ikon, förväntar dig en ledtråd, och får istället: en tom ruta, trunkerad text eller en popup som krupit utanför skärmkanten.

Att skriva tooltips från grunden för hand innebär att brottas med positionering, z-index, responsiv design och animering. Färdiga bibliotek löser allt detta med ett par rader kod. Men vilket ska man välja när marknaden har dussintals alternativ, från mikroskopiska CSS-snuttar till fullfjädrade ramverk för produktrundturer?

Vi samlade 21 open source-plugins för tooltips i JavaScript, jQuery och ren CSS, med skärmdumpar och ärliga genomgångar av funktionerna. Här finns verktyg för alla scenarier: ett snabbt tooltip för en landningssida, ett tooltip med HTML-innehåll för en webbapplikation och steg-för-steg-onboarding för SaaS.

💡 Snabb översikt:

• Välj en kategori: ren CSS, jQuery eller vanilla JS.
• Bestäm vad som ska finnas inuti: endast text eller HTML med bilder och knappar.
• Kontrollera autopositionering: så att tooltipen inte hamnar utanför skärmkanten.
• För produktrundturer, ta Intro.js eller Hopscotch, de är skräddarsydda för onboarding.

Översiktstabell: 21 plugins på 30 sekunder

1. Tippy.js

Tippy.js är de facto-standarden för tooltips i modern frontend. Biblioteket från utvecklaren atomiks är byggt ovanpå Popper.js (senare Floating UI) och ger felfri positionering: tooltipen undviker skärmens kanter på egen hand, flippar och anpassar sig till visningsporten.

Inuti finns allt du behöver för seriöst UI: animering via CSS-övergångar, interaktiva tooltips (du kan klicka på innehållet utan att det stängs), musspårning, nästlade tooltips och lazy rendering. Stöder React, Vue och ren DOM.

Enligt vår erfarenhet bör du byta till Tippy.js när ett projekt växer ur jQuery-djungeln: biblioteket tar bort det mesta av huvudvärken med positionering utan en enda rad manuell CSS.

Fördelar: minimalt beroendeträd, TypeScript-typning direkt ur kartongen, dokumentation med live-exempel. Nackdelar: overkill för ett enkelt texttooltip på en landningssida; paketstorlek ~30 KB (även om tree-shaking hjälper).

🔗 Tippy.js på GitHub🔗 Dokumentation och demo

2. Tooltipster

Tooltipster är en veteran bland jQuery-plugins för tooltips som inte har förvandlats till en pumpa. Biblioteket har funnits sedan 2012 och får fortfarande uppdateringar. Huvudfunktionen är fyra färdiga stilteman (default, light, borderless, punk) plus möjligheten att bygga egna via CSS.

Tooltipster hanterar HTML-innehåll, AJAX-laddning, flera utlösare (hover, klick, fokus, programmatiskt anrop), visa/dölj-timers och callbacks för varje livscykelsteg. Ett separat plus är inbyggt stöd för pekskärmsenheter: tryck på ett element visar tooltipen, upprepat tryck döljer den.

I praktiken passar Tooltipster bra i projekt på WordPress och jQuery-stacken, där det är besvärligt att dra in ett modernt paket från npm: anslut bara skriptet, konfigurera alternativen, så förvandlas alla länkar med title till snygga tooltips.

Fördelar: moget plugin med förutsägbart beteende, utmärkt dokumentation, stöd för pekskärm. Nackdelar: bundet till jQuery (2026 är detta redan ett beroende som många vill ta bort).

🔗 Tooltipster på GitHub

3. CSS Tooltip

Minimalistisk tooltip i ren CSS: ett HTML-element med data-tooltip, pseudo-elementen ::before och ::after för pilen och bakgrunden, plus en mjuk övergång vid hover. Ingen JavaScript, inte ens event handlers behövs.

Lösningen passar för statiskt innehåll: bloggar, dokumentation, landningssidor. Väger under ett kilobyte, kräver inga beroenden och påverkar inte First Input Delay. Kopiera bara CSS-snutten in i projektet och lägg till data-attribut.

Fördelar: noll JS, omedelbar prestanda, enkel att anpassa färger och avstånd. Nackdelar: endast text, ingen automatisk positionering, begränsat beteende på mobil (ingen hover).

4. Tipr

Tipr är ett litet jQuery-plugin (under 2 KB minifierat) som gör exakt en sak: visar en popup-tooltip när man hovrar över ett HTML-element. Platt design, inga seriffer, minimal konfiguration via data-attribut.

Idealisk när du behöver något som "bara funkar" utan onödiga abstraktioner. Stöder fyra positioner, anpassade klasser och växling av trigger. Vårt råd är att ta Tipr för små projekt där jQuery redan finns och du inte vill lägga till ett separat beroende för tooltips.

Fördelar: mikroskopisk storlek, enkelt API, kräver ingen konfiguration. Nackdelar: övergiven av författaren, primitiv positionering (kan klippas av vid skärmkanten).

Tipr finns på GitHub

5. CSS tooltip appear

Ytterligare en ren CSS-implementation, denna gång med betoning på animering vid visning. Tooltipen glider ut mjukt, med anpassningsbar varaktighet och easing-kurva. Passar för situationer där funktion inte är lika viktig som visuellt intryck: portföljer, kampanjsidor, presentationssajter.

Fördelar: vacker animation, ren CSS, inga skript. Nackdelar: endast text, ingen positionering vid skärmkanter, ingen interaktivitet.

6. Grumble.js

Grumble.js sticker ut visuellt: tooltipen är utformad som en seriebubbla och kan rotera runt målelementet 360 grader i steg om 1°. Utvecklaren James Cryer skapade pluginet specifikt för icke-standardiserade gränssnitt där en vanlig rektangel skulle se främmande ut.

Pluginet har inte uppdaterats på många år, men som koncept och för hobbyprojekt är det fortfarande intressant. Vi skulle inte sätta det i produktion på ett levande projekt: föråldrad jQuery-version i beroenden och inget mobilstöd.

Fördelar: unik design, exakt vinkelkontroll, behaglig animation. Nackdelar: stöds inte, gammal jQuery, ingen responsiv design.

🔗 Grumble.js på GitHub

7. Protip

Protip är ett jQuery-plugin som positionerade sig som "en tooltip för alla situationer." Flera skal (inklusive mörkt tema), animerade övergångar, fyra positioner och HTML-stöd. Baserat på repositoriet implementerade författaren ett API med fokus på utbyggbarhet: du kan kaskadinställa inställningar och sätta globala standardvärden.

I praktiken är Protip ett gediget mellanskiktsalternativ för jQuery-projekt. Inte lika kraftfullt som Tooltipster, men tillräckligt för grundläggande scenarier.

Fördelar: flera teman, bekvämt API, animation. Nackdelar: repositoriet inte uppdaterat, sparsam dokumentation.

Protip finns på GitHub

8. Tipped

Tipped är ett lättviktigt JavaScript-bibliotek utan beroenden. Det stöder flera skal, storlekar och interaktionsvarianter: hover, klick, fokus, manuell anrop. Positioneringen är fast (fyra sidor), utan smart undvikande av kanter, för enkla gränssnitt räcker detta.

Observera att biblioteket inte har uppdaterats på länge och community-supporten är minimal. År 2026 skulle vi för ett nytt projekt rekommendera Tippy.js, men om projektet redan kör Tipped och det fungerar finns det ingen anledning att byta.

Fördelar: inga beroenden, enkelt API, flera skal. Nackdelar: ingen automatisk positionering, projektet verkar övergivet.

Tipped finns tillgängligt på GitHub

9. Microtip

Microtip från utvecklaren Indrashish Ghosh är ett rent CSS-baserat tooltip-bibliotek som väger mindre än 1 KB gzippat. Tillgänglighet direkt ur lådan (aria-label + role="tooltip"), GPU-animation (transform istället för top/left), responsivt typsnitt.

Vårt favoritscenario för Microtip är ikoner utan etiketter i en adminpanel eller ett gränssnitt: häng på aria-label, lägg till en klass, så får användaren en ledtråd utan en enda rad JavaScript. Biblioteket används aktivt i projekt på GitHub (3,5k+ stjärnor), även om det inte har kommit några större uppdateringar de senaste åren.

Fördelar: ultralätt, redo för tillgänglighet, saktar inte ner renderingen. Nackdelar: endast text, ingen interaktivitet, fast position.

🔗 Microtip på GitHub

10. Auto Tooltips

Auto Tooltips är ett JavaScript-bibliotek som automatiskt väljer den optimala positionen för ett tooltip beroende på tillgängligt utrymme. Till skillnad från Microtip eller CSS Tooltip kan ledtråden här hoppa till en annan sida av elementet om det inte finns tillräckligt med plats vid skärmkanten.

Visuellt stilrena tooltips med skugga och rundade hörn. Positioneringslogiken är skriven utan externa beroenden, hela biblioteket ryms på några kilobyte.

Fördelar: automatisk positionering, lättviktigt, snygg design. Nackdelar: inaktivt repository, minimal dokumentation.

11. JBox

JBox är inte bara ett tooltip, utan ett universellt dialogramverk på jQuery. Förutom popup-ledtrådar hanterar det modala fönster, notiser (notice) och helskärmsöverlägg. Varje dialogtyp är en separat plugin inom en gemensam arkitektur.

Enligt vår erfarenhet är JBox bra i projekt där du behöver en enhetlig visuell stil för alla popup-element. Biblioteket stöder AJAX-innehåll, animation, callbacks och responsiv positionering. Storleken motiveras av funktionaliteten: ~20 KB för en komplett uppsättning dialogkomponenter.

Fördelar: fyra dialogtyper i ett paket, bra dokumentation, aktiv support. Nackdelar: jQuery-beroende, överdrivet om du bara behöver tooltips.

🔗 JBox på GitHub

12. Wenk

Wenk (från hindi, "eldfluga") är ett CSS-tooltip-bibliotek som använder dataattribut för positionering. Du kan ställa in position (data-wenk="left"), längd och pilstil. All magi ligger i ren CSS, plus en valfri JS-fil för automatiskt positionsval.

Vikten är cirka 1,2 KB minifierad. Utmärkt val när Microtip känns för minimalistiskt och du inte vill dra in Tippy.js.

Fördelar: dataattribut för position, lättvikts-JS-hjälpare, tilltalande design. Nackdelar: inga interaktiva tooltips, positionering begränsad till åtta riktningar.

Wenk finns tillgängligt på GitHub

13. Crumble

Crumble är ett överlägg på Grumble.js, som lägger till en bubbeleffekt som "smulas sönder" vid stängning. Visuellt intressant koncept, men dubbelt beroende (jQuery + Grumble.js) och total avsaknad av uppdateringar gör det uteslutande till ett historiskt utställningsobjekt.

Vi tog med Crumble i samlingen för fullständighetens och den visuella mångfaldens skull, men för ett verkligt projekt, leta efter mer levande alternativ.

Fördelar: unik stängningsanimation, drar till sig uppmärksamhet. Nackdelar: två föråldrade beroenden, inte för produktion.

🔗 Grumble.js (beroende)

14. Intro.js

Intro.js är inte längre ett tooltip, utan ett fullfjädrat ramverk för användaronboarding. Med biblioteket skapar du steg-för-steg-instruktioner: elementmarkering, popup-fönster med förklaring, "Nästa"/"Klar"-knappar. Inga beroenden, ren JavaScript.

I vårt test visade sig Intro.js vara det mest mogna verktyget för produktrundturer: 23k+ stjärnor på GitHub, TypeScript-kodbas, stöd för flersidiga turer (med tillståndsöverföring mellan sidor), anpassning via CSS-klasser och callbacks för varje steg.

Fördelar: de facto-standard för onboarding-turer, aktiv utveckling, detaljerad dokumentation. Nackdelar: ~45 KB, motiverat av funktionaliteten, men överdrivet för ett enkelt tooltip.

🔗 Intro.js på GitHub🔗 Live-demo

15. PowerTip

PowerTip från Steven Benner (skaparen av jQuery QueryBuilder) introducerar ett intressant koncept: ett regelsystem garanterar att endast ett tooltip är synligt på skärmen åt gången. Det löser det klassiska problemet när en användare snabbt för muspekaren över flera element och får en röra av överlappande tips.

Pluginet stöder komplex markup inuti tooltipet (inklusive AJAX-innehåll), anpassade utlösare och positionering i åtta riktningar. I jQuery-projekt är PowerTip ett av de mest pålitliga alternativen.

Fördelar: smart visningssystem, HTML-innehåll, stabil drift. Nackdelar: jQuery-beroende, repot får sällan uppdateringar.

🔗 PowerTip på GitHub

16. Toolbar.js

Toolbar.js från Paul Kinzett är ett "tooltip som verktygsfält"-grepp: popup-fönstret innehåller inte bara text, utan knappar, ikoner, länkar. Ett typiskt scenario är att du markerar text på en sida, då visas en panel med knapparna "Kopiera", "Dela", "Sök".

Pluginet använder Popper.js för positionering, vilket garanterar korrekt beteende vid skärmkanter. Projektet har samlat 2,3k+ stjärnor, men det har inte kommit några större uppdateringar på senare år. Konceptuellt påverkade Toolbar.js många moderna UI-mönster (Medium-liknande markeringspaneler).

Fördelar: unikt "tooltip som actionpanel"-grepp, bra positionering. Nackdelar: projektet är fryst, bundet till gammal Popper.js-version.

🔗 Toolbar.js på GitHub

17. Simptip

Simptip är ett CSS-tooltip-bibliotek skrivet i Sass med mixins och variabler. Det gör det bekvämt för projekt där tooltipets utseende måste matcha designsystemet exakt: ändra variabeln $bg-color så får alla tooltips en ny färg.

Biblioteket stöder mjuka och skarpa pilar, fyra positioner och en visningseffekt (fade-in). Storleken är minimal: kompilerad CSS är cirka 2 kB.

Fördelar: Sass-variabler för anpassning, snygg design, lättviktigt. Nackdelar: inget HTML-innehåll, projektet uppdateras inte.

🔗 Simptip på GitHub

18. HubSpot Tooltip

HubSpot öppnade sitt interna tooltip-bibliotek med öppen källkod, det är byggt ovanpå Tether (positioneringsmotor, föregångare till Popper.js) och Drop (bibliotek för dropdown-element). Kombinationen ger ett kraftfullt, flexibelt tooltip-system med automatisk positionering.

Numera är HubSpot Tooltip främst av historiskt intresse: biblioteket uppdateras inte, Tether ersattes officiellt av Popper.js (och sedan av Floating UI). Trots det påverkade HubSpots arkitekturbeslut moderna bibliotek, själva greppet "positioneringsmotor + visningsmotor" blev standard.

Fördelar: industriell kodkvalitet, bra positionering, HTML-stöd. Nackdelar: föråldrade beroenden (Tether), projektet är fryst.

🔗 HubSpot Tooltip på GitHub

19. Hopscotch

Hopscotch är det andra ramverket efter Intro.js för att skapa produktrundturer. Angreppssättet skiljer sig: istället för en kedja av DOM-element beskriver du turen som ett JSON-objekt (steg, mål, innehåll), och biblioteket hanterar rendering och navigering självt. Stöd för flersidesturer, användaren följer en länk och turen fortsätter från samma steg.

Projektet flyttades under broccolijs-archive-organisationens vingar och är fryst. För en ny produkt rekommenderar vi Intro.js, men om du underhåller legacy-kod med Hopscotch fungerar det fortfarande och är dokumenterat.

Fördelar: JSON-beskrivning av turen, flersidestöd, mogen API. Nackdelar: projektet arkiverat, inga nya funktioner.

Hopscotch på GitHub (projektet arkiverat)

20. Darktooltip

Darktooltip är ett jQuery-plugin med fast mörk design, stöd för HTML-innehåll och visningsanimation. API:et är enkelt: anropa .darktooltip() på ett element, skicka med alternativ, klart. Passar för små widgets och adminpaneler där du snabbt behöver en enhetlig tooltip utan att krångla med CSS.

Enligt vår erfarenhet är Darktooltip ett nischverktyg: om det mörka temat passar designen fungerar det bra; om du behöver färganpassning är det enklare att ta Tooltipster eller Tippy.js.

Fördelar: enkelt API, HTML-innehåll, trevlig animation. Nackdelar: endast mörkt tema, jQuery-beroende, projektet inaktivt.

🔗 Darktooltip på GitHub

21. Tipso

Tipso avslutar samlingen som ett trevligt lättviktigt jQuery-plugin med CSS3-animation. Responsiv design direkt ur kartongen (tooltipen ändrar storlek på mobil), flera utlösare och positioner, HTML-stöd. Notera separat att Tipso finns som ett plugin för WordPress, vilket kan vara bekvämt för WordPress-sajtägare som inte vill grotta ner sig i kod.

Biblioteket har inte uppdaterats på flera år, men kodbasen är stabil och har inga kritiska buggar. För enkla jQuery-projekt ett fungerande alternativ.

Fördelar: responsivitet, WordPress-version, trevlig animation. Nackdelar: inte uppdaterat, bundet till jQuery.

🔗 Tipso på GitHub

Hur vi testade, och hur du väljer din tooltip

Vi körde varje plugin genom samma checklista: laddning på en tom sida, rendering vid skärmkanten, beteende vid snabba hover-byten, mobilt tryck, färg-/typsnittsanpassning. Betygen i tabellen ovan är inte abstrakta "stjärnor", utan direkta resultat av dessa tester.

För snabbt urval, ha den här matchningsmatrisen till hands:

• Landningssida, blogg, dokumentation → Microtip eller Wenk. Ren CSS, omedelbar laddning, inget extra.
• Adminpanel på jQuery, WordPress-sajt → Tooltipster. Moget, stabilt, med touch-stöd.
• Modern webbapplikation, React/Vue → Tippy.js. Bästa positioneringen på marknaden, TypeScript, aktiv utveckling.
• Dialogfönster + tooltips + notiser i ett paket → JBox. Enhetlig stil för alla popups.
• Produktrundtur, onboarding, steg-för-steg-instruktioner → Intro.js. Branschstandard, 23k+ stjärnor, flersidesturer.

Generell regel vi härledde från testerna: om du är osäker, ta Tippy.js. Det täcker de allra flesta scenarier, drar inte in jQuery och löser positioneringsproblemet en gång för alla. Och om projektet redan ligger på jQuery och det inte finns budget avsatt för migrering kommer Tooltipster inte att svika dig.

Video: hur du skapar en snygg tooltip i ren CSS

För att se tooltips i aktion, titta på denna handledning från AlgoKage, på 10 minuter bygger du en stilren popup-ledtråd utan en enda rad JavaScript:

⁉️🤔 Vanliga frågor

Behövs JavaScript för tooltips?

Inte nödvändigt. För en enkel text-tooltip på desktop räcker CSS (Microtip, Wenk, Simptip). Men om du behöver HTML-innehåll, automatisk positionering vid skärmkanter, klickutlösare eller mobilstöd klarar du dig inte utan JavaScript. Tippy.js och Tooltipster täcker dessa scenarier.

Hur viktig är tillgänglighet (a11y) i tooltips?

Avgörande. Användare av skärmläsare måste få tooltip-texten utan att föra muspekaren över. Rätt tillvägagångssätt: använd aria-describedby på utlösaren och role="tooltip" på själva tooltipen. Tippy.js och Microtip stöder detta direkt ur kartongen. Om du skriver din egen tooltip, ignorera inte WAI-ARIA.

På vilket sätt är Tippy.js bättre än gamla Tooltipster?

Tippy.js är inte beroende av jQuery, skrivet i TypeScript, använder Floating UI för positionering (tooltipen håller sig alltid inom viewporten) och stöder tree-shaking. Tooltipster är moget och stabilt, men jQuery-beroende är 2026 oönskat för nya projekt. Om du redan har en jQuery-stack är Tooltipster ett utmärkt val; om du börjar från scratch, Tippy.js.

Kan man använda flera tooltip-bibliotek på en sajt?

Tekniskt ja, men i praktiken skapar detta stilkonflikter, kodduplicering och felsökningsförvirring. Undantag är Microtip för ikoner + Intro.js för produktrundtur: deras ansvarsområden överlappar inte. Generellt, välj ett bibliotek för huvudscenariot.

Varför kapas tooltips på mobilen?

Mobila enheter har ingen hover, och deras viewport är smal. Tooltips som visas till höger om ett element på desktop kan hamna utanför skärmen på mobil. Lösning: antingen responsiv position (Tippy.js kan automatiskt välja sida), eller ersätt tooltipen med en klickbar popover för mobil.

Bör man använda Grumble.js eller Crumble i ett riktigt projekt?

Nej. Båda biblioteken har inte uppdaterats på mer än 10 år och är beroende av en föråldrad jQuery-version. Visuellt är de intressanta som koncept, men för produktion, ta moderna motsvarigheter: Tippy.js med ett anpassat tema kan imitera vilken visuell stil som helst utan föråldrade beroenden.

Vilket tooltip-plugin ska man välja 2026?

Tjugoen plugins är mycket för ett val, men verkligt universella bland dem är tre: Microtip för ultralätta CSS-ledtrådar, Tooltipster för jQuery-projekt och Tippy.js för allt annat. Intro.js står för sig självt, det är inte en tooltip utan ett ramverk för onboarding, och i sin nisch är det bäst.

De återstående arton är antingen nischverktyg för specifik design (Darktooltip, Simptip), eller historiska artefakter som påverkade branschen (Grumble.js, HubSpot Tooltip), eller solida men frysta projekt som fortfarande fungerar, även om det för ny kod är bättre att ta något levande.

Om du har läst ända hit har samlingen fyllt sin uppgift: nu vet du vilket plugin du ska ta för ditt projekt. Ta det och prova, alla länkar till dokumentation och repositories finns i beskrivningen av varje verktyg.