Softonic

CSS-tooltipgenerator

Steg 1 / 2
Nästa

Tooltips är ofta det första ett projekt tar till en JavaScript-bibliotek för, men ett enkelt ::after-pseudoelement som styrs av attributet data-tooltip täcker 90 % av de verkliga fallen. Den här generatorn ger dig exakt de .tooltip- och .tooltip::after-regler du behöver: välj position överst, nederst, till vänster eller till höger, justera bakgrunds- och textfärg och kopiera blocket till ditt stilmall.

Så kopplar du tooltipen till din HTML

  1. 1

    Välj en position

    Överst, nederst, till vänster eller till höger. Generatorn använder `calc(100% + 8px)` plus rätt transform, så att bubblan ligger tätt intill utlösarelementet.

  2. 2

    Välj färger

    Bakgrundsfärgen tillämpas på bubblan och textfärgen på tooltipens etikett. För läsbarhetens skull bör kontrasten hållas på 4,5:1 eller bättre.

  3. 3

    Kopiera CSS-koden

    Klistra in det genererade blocket i ditt stilmall. Det innehåller reglerna `.tooltip`, `.tooltip::after` och `:hover`.

  4. 4

    Märk upp utlösarelementet

    Lägg till `class="tooltip" data-tooltip="Din text"` på valfritt element. `::after` läser attributet via `content: attr(data-tooltip)`.

Tooltips i ren CSS: vad du vinner och vad du ger upp

En tooltip som bara bygger på CSS är liten, snabb och fungerar även när JavaScript är avstängt. Den lever dock i DOM:ens källordning och ärver därför vissa begränsningar som du måste designa runt.

Vad den genererade CSS-koden gör

  • Ställer in utlösarelementet på position: relative så att den absolut positionerade tooltipen förankras vid det.
  • Hämtar etiketten från content: attr(data-tooltip), vilket innebär att du aldrig behöver duplicera texten.
  • Animerar opaciteten med transition: opacity 0.15s, så att tooltipen visas snabbt men inte tvärt.
  • Använder pointer-events: none på bubblan så att den aldrig blockerar klick på utlösarelementet.

Positionsberäkning

Position Offsetregel
överst bottom: calc(100% + 8px); left: 50%; translateX(-50%)
nederst top: calc(100% + 8px); left: 50%; translateX(-50%)
vänster right: calc(100% + 8px); top: 50%; translateY(-50%)
höger left: calc(100% + 8px); top: 50%; translateY(-50%)

Tillgänglighetsanmärkningar

  • data-tooltip läses inte upp av skärmläsare. Om informationen är väsentlig bör du komplettera den med aria-label eller synlig text.
  • Tangentbordsanvändare behöver :focus-visible utöver :hover. Utöka den genererade regeln till .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Tooltips som klipps av overflow: hidden på ett föräldraelement försvinner. Flytta utlösarelementet ut ur den klippande behållaren, eller byt till en popover som renderas med JavaScript för täta gränssnitt.

Vanliga frågor

Ett pseudoelement håller DOM:en ren, undviker att du dubblerar etikettexten och låter dig styla tooltipen utan att riskera att av misstag matcha andra element. Priset är att innehållet i ::after inte kan indexeras av hjälpmedelsteknik, så förstärk kritisk text med aria-label.

Ja, lägg till ett andra pseudoelement, till exempel .tooltip::before, format som en ruta med noll bredd och höjd och färgade kanter. Det är ett klassiskt CSS-triangeltrick; det medföljande verktyget CSS Triangle Generator i den här sviten genererar exakt de kantdeklarationer du behöver.

Lägg till transition-delay: 0.3s i ::after-regeln men återställ den till noll när muspekaren lämnar; eller använd transition: opacity 0.15s 0.3s; för att fördröja visningen utan att fördröja att den försvinner.

Positionen och färgerna du väljer skickas till vår server för att generera CSS-koden, men de sparas eller återanvänds inte. På flerstegssidan färdas de i länken mellan stegen; i enstegsvyn bevaras ingenting.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Oktal-till-decimal-omvandlare

Omvandla oktala tal (bas 8) till decimalvärden, med den fullständiga positionsformeln och en steg-för-steg-uppdelning.

Markdown-förhandsvisare

Skriv Markdown och se den renderade HTML:en uppdateras live. GitHub-flavored syntax med tabeller, uppgiftslistor, inramad kod och autolänkar.

Verktyget finns på andra språk