CSS-Tooltip-Generator
Wähle Position und Stil und fahre mit der Maus (oder Tab) über die Buttons der Vorschau. Der Code nutzt kein JavaScript.
So geht’sHinweis, der beim Darüberfahren mit der Maus erscheint
Verfügbar auf: 
CSS-Tooltip-Generator: wofür es gut ist
Ein Tooltip ist der kurze Hinweis, der erscheint, wenn man mit der Maus über einen Button oder ein Icon fährt. Dieser Generator macht den Hinweis nur mit CSS, in den vier Positionen, mit optionalem Pfeilchen, Farben, Ecken und einer Verzögerung, damit er nicht blinkt, wenn die Maus nur darüberfährt.
Der Code ist barrierefrei: Der Hinweis ist per aria-describedby mit dem Button verbunden, hat role=tooltip, erscheint auch, wenn das Element per Tastatur oder Touch Fokus bekommt, und beachtet, wer weniger Bewegung bevorzugt. Die Vorschau hat drei Buttons zum Testen.
So geht’s
- Wähle Position, Farben und Ecken.
- Passe Verzögerung und Pfeilchen an.
- Kopiere HTML und CSS.
Wann nutzen
- Icons ohne Text erklären.
- Hinweise in Formularen.
- Aktions-Buttons in Dashboards.
Häufige Fragen
Funktioniert der Tooltip am Handy?
Am Handy gibt es kein Darüberfahren mit der Maus; der Hinweis erscheint, wenn das Element Fokus bekommt, beim Antippen eines Buttons oder Links. Deshalb setze in den Tooltip keine Information, die die Person unbedingt braucht: Sie muss auch im Text der Seite stehen.
Wie wird er barrierefrei?
Der Text des Hinweises steht in einem Element mit role=tooltip, per aria-describedby mit dem Button verbunden, damit der Screenreader ihn zusammen mit dem Namen des Buttons liest. Er erscheint auch beim Tastaturfokus (focus-visible) und hängt nicht nur von der Farbe ab.
Warum gibt es eine Verzögerung beim Erscheinen?
Eine kleine Verzögerung verhindert, dass die Hinweise blinken, wenn die Maus nur auf dem Weg woandershin darüberfährt. Beim Verschwinden ist der Effekt sofort.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.