CSS-Tooltip-Generator

Tooltips nur mit CSS: Position, Farben, Pfeil, Verzögerung und Animation einstellen – barrierearm per Hover und Fokus.

Der CSS-Tooltip-Generator erzeugt Tooltips ohne JavaScript über ein data-Attribut und Pseudo-Elemente. Position, Farben, Radius, Pfeilgröße, Breite, Verzögerung und Animation sind einstellbar. Der Tooltip erscheint bei Hover und bei Tastaturfokus; die Vorschau kann ihn dauerhaft anzeigen, damit du das Aussehen in Ruhe anpasst.

Tooltip in der Vorschau dauerhaft zeigen

Position

Animation

Hintergrund

Textfarbe

Eckenradius px

Pfeilgröße px

Innenabstand seitlich px

Innenabstand oben/unten px

Schriftgröße px

Maximale Breite px

Dauer ms

Verzögerung ms

Tooltip-Text

<button type="button" class="tooltip" data-tooltip="Kopiert den Link in die Zwischenablage">
  Fahre über mich
</button>

Aufbau eines CSS-Tooltips

Das Element mit Tooltip bekommt position: relative. Die Sprechblase ist ::after mit position: absolute, der Pfeil ist ::before aus einem Rahmen, von dem nur eine Seite eingefärbt ist. Beide starten unsichtbar und erscheinen bei Hover oder Fokus.

Eigenschaft	Zweck
`content: attr(data-tooltip)`	Text aus dem HTML-Attribut
`width: max-content`	Breite passt sich dem Text an
`visibility` + `opacity`	Weiches Ein- und Ausblenden
`transition-delay`	Verhindert Flackern beim Überfahren

Kurze Rückmeldungen nach Aktionen zeigst du besser mit einem Toast aus dem Toast-Generator.

Häufige Fragen

Wie funktioniert ein Tooltip ohne JavaScript?

Der Text steht im Attribut data-tooltip. ::after zeigt ihn per content: attr(data-tooltip) an, ::before zeichnet den Pfeil aus Rahmenlinien. Bei :hover und :focus-visible werden beide eingeblendet.

Sind CSS-Tooltips barrierefrei?

Eingeschränkt. Inhalte aus Pseudo-Elementen werden nicht von allen Screenreadern zuverlässig vorgelesen. Wichtige Informationen gehören deshalb auch in ein aria-label oder sichtbaren Text. Für reine Zusatzhinweise auf Buttons ist ein CSS-Tooltip in Ordnung, sofern er auch beim Tastaturfokus erscheint.

Warum wird mein Tooltip abgeschnitten?

Hat ein Elternelement overflow: hidden, schneidet es den Tooltip ab. Dann hilft nur, das Overflow zu ändern, die Position zu wechseln oder einen Tooltip per Popover-API bzw. JavaScript außerhalb des Containers zu rendern.

Funktioniert das auch auf Touch-Geräten?

Hover gibt es auf Touch-Geräten nicht zuverlässig. Bei Buttons erscheint der Tooltip meist kurz beim Antippen über den Fokus. Wichtige Infos sollten deshalb nie nur im Tooltip stehen.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.