Softonic

CSS-tooltipgenerator

Stap 1 / 2
Volgende

Tooltips zijn vaak het eerste waarvoor een project naar een JavaScript-bibliotheek grijpt, terwijl een eenvoudig ::after-pseudo-element dat wordt aangestuurd door een data-tooltip-attribuut al 90% van de praktijkgevallen dekt. Deze generator levert precies de .tooltip- en .tooltip::after-regels die je nodig hebt: kies de positie boven, onder, links of rechts, stel de achtergrond- en tekstkleur in en kopieer het blok naar je stylesheet.

Zo koppel je de tooltip aan je HTML

  1. 1

    Kies een positie

    Boven, onder, links of rechts. De generator gebruikt `calc(100% + 8px)` plus de juiste transform, zodat de ballon strak tegen het triggerelement zit.

  2. 2

    Kies kleuren

    De achtergrondkleur wordt toegepast op de ballon, de tekstkleur op het tooltiplabel. Houd het contrast op 4,5:1 of beter voor de leesbaarheid.

  3. 3

    Kopieer de CSS

    Plak het gegenereerde blok in je stylesheet. Het bevat de regels `.tooltip`, `.tooltip::after` en `:hover`.

  4. 4

    Voorzie het triggerelement van markup

    Voeg `class="tooltip" data-tooltip="Jouw tekst"` toe aan een willekeurig element. De `::after` leest het attribuut via `content: attr(data-tooltip)`.

Tooltips in puur CSS: wat je wint en wat je opgeeft

Een tooltip die alleen op CSS steunt, is klein, snel en werkt ook wanneer JavaScript is uitgeschakeld. Hij bevindt zich echter in de bronvolgorde van de DOM en erft daardoor enkele beperkingen waar je omheen moet ontwerpen.

Wat de gegenereerde CSS doet

  • Zet het triggerelement op position: relative, zodat de absoluut gepositioneerde tooltip eraan verankerd wordt.
  • Haalt het label uit content: attr(data-tooltip), waardoor je de tekst nooit hoeft te dupliceren.
  • Animeert de dekking met transition: opacity 0.15s, zodat de tooltip snel maar niet abrupt verschijnt.
  • Gebruikt pointer-events: none op de ballon, zodat die nooit klikken op het triggerelement blokkeert.

Positieberekening

Positie Offsetregel
boven bottom: calc(100% + 8px); left: 50%; translateX(-50%)
onder top: calc(100% + 8px); left: 50%; translateX(-50%)
links right: calc(100% + 8px); top: 50%; translateY(-50%)
rechts left: calc(100% + 8px); top: 50%; translateY(-50%)

Toegankelijkheidskanttekeningen

  • data-tooltip wordt niet voorgelezen door schermlezers. Als de informatie essentieel is, combineer deze dan met aria-label of zichtbare tekst.
  • Toetsenbordgebruikers hebben naast :hover ook :focus-visible nodig. Breid de gegenereerde regel uit tot .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Tooltips die door overflow: hidden op een voorouder worden afgesneden, verdwijnen. Verplaats het triggerelement uit de afsnijdende container of stap over op een via JavaScript gerenderde popover voor drukke interfaces.

Veelgestelde vragen

Een pseudo-element houdt de DOM schoon, voorkomt dat je de labeltekst dupliceert en laat je de tooltip stylen zonder dat je bang hoeft te zijn per ongeluk andere elementen te raken. De keerzijde is dat de inhoud van ::after niet door hulptechnologie kan worden geïndexeerd, dus versterk cruciale tekst met aria-label.

Ja, voeg een tweede pseudo-element toe, bijvoorbeeld .tooltip::before, gevormd als een vak met breedte en hoogte nul en gekleurde randen. Dit is een klassieke CSS-driehoektruc; de bijbehorende CSS Triangle Generator in deze suite produceert precies de randdeclaraties die je nodig hebt.

Voeg transition-delay: 0.3s toe aan de ::after-regel, maar zet die terug op nul zodra de muis weggaat; of gebruik transition: opacity 0.15s 0.3s; om het verschijnen uit te stellen zonder het verdwijnen te vertragen.

De positie en kleuren die je kiest, worden naar onze server gestuurd om de CSS te genereren, maar worden niet opgeslagen of hergebruikt. Op de meerstappenpagina reizen ze in de link tussen de stappen; in de enkelvoudige weergave wordt niets bewaard.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

Tool beschikbaar in andere talen