CSS Tooltips: Enkel og responsiv

I den moderne webudviklingsverden er det ofte ønskeligt at minimere brugen af JavaScript for at opnå hurtigere indlæsningstider og enklere vedligeholdelse. Dette gælder også for små, men vigtige UI-komponenter som tooltips. Ted Krueger deler her sin tilgang til at skabe en tooltip udelukkende ved hjælp af CSS, der er både letvægtig og responsiv. Målet er at levere en elegant løsning, der kan integreres problemfrit i ethvert internt framework, og som kræver minimal markup for maksimal effekt.

Den Essentielle CSS Tooltip

Kernen i Kruegers løsning er at skabe en tooltip med kun ét HTML-element. Dette opnås ved at udnytte HTML5's data-attributter og CSS's kraftfulde pseudo-elementer. Forestil dig at kunne skabe en tooltip med en enkelt linje HTML som denne:

<div class="tooltip-right" data-pui-tooltip="Dette er, hvordan vores tooltips ser ud."> Tooltip </div>

Her er det data-pui-tooltip-attributten, der indeholder den tekst, som skal vises i tooltippen. Hemmeligheden bag at få denne tekst vist ligger i CSS'en. Ved hjælp af :after pseudo-elementet kan vi hente værdien fra data-attributten og bruge den som indhold for tooltippen:

[data-pui-tooltip]:after { content: attr(data-pui-tooltip); }

Denne simple CSS-regel er grundlaget for en fuldt funktionel tooltip, der vises ved hover og kræver ingen JavaScript. Det er en elegant løsning, der holder markupen let og ren.

Responsivitet: Udfordringen med Små Skærme

Mens den grundlæggende CSS-løsning fungerer godt på desktop-skærme, opstår der udfordringer, når vi bevæger os ned til mindre skærmstørrelser, typisk under 768px. Problemet ligger i brugen af position: absolute til at placere tooltippen. På små skærme kan dette føre til, at tooltippen enten overlapper indhold eller placeres uhensigtsmæssigt.

Selvom man kunne forsøge at begrænse max-width på mindre skærme, er det sjældent en holdbar løsning, da den ikke dækker alle tænkelige scenarier. Krueger overvejede endda at undlade at vise tooltips på mobile enheder, da de kan være besværlige i små opløsninger. Men målet var at fastholde en CSS-only løsning, der også var responsiv.

Mobile-First Tilgangen til Tooltips

For at tackle problemet med små skærme introducerede Krueger en mobil-specifik løsning. Hovedidéen er at opgive den absolutte positionering, der binder tooltippen til en bestemt placering i forhold til det element, den er knyttet til. I stedet fokuseres der på at vise tooltip-indholdet centralt i browserens synsfelt.

Denne tilgang blev demonstreret i en CodePen-demo, hvor man kan observere, hvordan en tooltip, der er designet til desktop, bryder sammen på mindre skærme. Den mobile-specifikke løsning bruger position: fixed for at placere tooltippen midt på skærmen. Dette sikrer, at indholdet altid er synligt, uanset hvor på siden brugeren befinder sig, og uden at skulle bekymre sig om absolut positionering i forhold til et specifikt element.

CSS-reglen for denne mobile-tilpasning ser således ud:

&:after { font-size: 1rem; max-width: 20rem; position: fixed; bottom: auto; top: 50%; left: 50%; text-align: left; transform: translate(-50%); white-space: normal; }

Ved at bruge top: 50%, left: 50% og transform: translate(-50%), centreres elementet præcist i midten af viewporten. white-space: normal sikrer, at teksten brydes korrekt, hvis den er lang.

Fordele ved CSS-Only Tooltips

Der er flere markante fordele ved at anvende denne metode til at skabe tooltips:

• Minimal Markup: Kræver kun ét HTML-element og en data-attribut.
• Ingen JavaScript: Reducerer afhængigheder og forbedrer ydeevnen.
• Fuldt Responsiv: Tilpasser sig problemfrit til alle skærmstørrelser.
• CSS-baseret: Gør det nemt at style og integrere med eksisterende CSS.
• Tilgængelighed: Selvom det ikke er direkte nævnt, kan denne metode gøres tilgængelig med yderligere ARIA-attributter.

Sammenligning: CSS-Only vs. JavaScript Tooltips

Det er nyttigt at sammenligne denne rene CSS-tilgang med traditionelle JavaScript-baserede tooltips:

Ofte Stillede Spørgsmål (FAQ)

Hvordan sikrer jeg, at min tooltip er tilgængelig?

Selvom denne metode fokuserer på CSS, er det vigtigt at overveje tilgængelighed. For at gøre den mere tilgængelig, kan du tilføje ARIA-attributter til det element, der udløser tooltippen, f.eks. aria-describedby, der peger på et skjult element med tooltip-indholdet, eller aria-label, hvis tooltippen er en simpel beskrivelse af et ikon eller en knap.

Kan jeg ændre tooltipens udseende?

Ja, absolut. Da hele tooltipen styres af CSS, kan du nemt ændre color, background-color, font-size, padding, border-radius og meget mere ved at tilføje eller ændre regler for .tooltip-right:after eller det element, den er knyttet til.

Hvad hvis jeg har brug for mere kompleks funktionalitet i min tooltip?

Hvis din tooltip skal indeholde interaktive elementer, formularer eller dynamisk indhold, der hentes via AJAX, vil en ren CSS-løsning sandsynligvis ikke være tilstrækkelig. I sådanne tilfælde er en JavaScript-baseret løsning mere passende. Denne CSS-only metode er ideel til simple tekst-baserede tips.

Hvilken browserunderstøttelse kan jeg forvente?

Pseudo-elementer (:after) og attr()-funktionen er bredt understøttet i moderne browsere. CSS transform og position: fixed er også standard. Du bør dog altid teste din implementering på tværs af de browsere, dine brugere anvender.

Konklusion

At skabe en responsiv tooltip udelukkende med CSS er en opnåelig og fordelagtig tilgang. Ved at udnytte data-attributter og pseudo-elementer kan udviklere levere en letvægtig, hurtig og elegant løsning. Overgangen til en mobil-optimeret strategi, der centrerer indholdet på små skærme, sikrer en god brugeroplevelse på tværs af alle enheder. Denne metode understreger kraften i moderne CSS og dens potentiale til at reducere behovet for JavaScript i mange almindelige UI-komponenter.

Hvis du vil læse andre artikler, der ligner CSS Tooltips: Enkel og responsiv, kan du besøge kategorien Teknologi.