CSS-Tooltip-Generator Erstellen Sie reine CSS-Tooltips mit anpassbarer Position, Pfeil, Farben und Stil.

🎨

CSS-Tooltip-Generator

Erstellen Sie reine CSS-Tooltips mit anpassbarer Position, Pfeil, Farben und Stil.

Wählen Sie die Tooltip-Position

Wählen Sie eine Position für den Tooltip: oben, unten, links oder rechts.

Styling des Tooltips

Passen Sie Farben, Schriftgröße, Padding, Border-Radius und Pfeilgröße an.

Kopieren des CSS-Codes

Vorschau des Tooltips und Kopie des kompletten CSS-Codes einschließlich Pfeilstilen.

Loading tool...

What Is CSS-Tooltip-Generator?

Der CSS-Tooltip-Generator erstellt reine CSS-Tooltips, die kein JavaScript benötigen. Tooltips liefern zusätzliche Informationen, wenn Benutzer über Elemente fahren oder diese fokussieren, was sie für zugängliche Web-Oberflächen unerlässlich macht. Mit diesem Tool können Sie die Tooltip-Position (oben, unten, links oder rechts), Hintergrund- und Textfarben, Schriftgröße, Padding, Border-Radius und Pfeilgröße anpassen. Der Tooltip-Pfeil wird mithilfe von CSS-Bordertechniken erstellt und die Positionierung erfolgt mit absoluter Positionierung relativ zum Elternelement. Der generierte Code enthält die Wrapper-, Tooltip- und Pfeil-Pseudo-Element-Stile, sodass Sie eine komplette, selbstenthaltene Tooltip-Lösung erhalten. Die Vorschau zeigt den Tooltip immer sichtbar an, damit Sie Ihre Styling-Änderungen in Echtzeit sehen können.

Why Use CSS-Tooltip-Generator?

Reine CSS-Lösung ohne erforderliche JavaScript-Abhängigkeiten
Vier Positionsoptionen mit korrekt ausgerichteten Pfeilen
Komplette Anpassung von Farben, Größen und Abständen
Generierter Code enthält Wrapper-, Tooltip- und Pfeilstile

Common Use Cases

Symbol-Tooltips

Fügen Sie beschreibende Tooltips zu Symbol-Schaltflächen hinzu, um die Zugänglichkeit zu verbessern.

Formularfeld-Hinweise

Bieten Sie hilfreiche Hinweise und Validierungsmitteilungen auf Formulareingaben an.

Navigationsbeschriftungen

Zeigen Sie Beschriftungen für kompakte Navigationspunkte bei Mouseover an.

Datenvisualisierung

Fügen Sie Tooltips zu Diagrammelementen und Datenpunkten hinzu, um zusätzlichen Kontext bereitzustellen.

Technical Guide

CSS-Tooltips verwenden absolute Positionierung innerhalb eines relativ positionierten Wrappers. Das Tooltip-Element wird mit top/bottom/left/right und transform für die Zentrierung positioniert. Der Pfeil wird mithilfe des ::after-Pseudo-Elements mit der CSS-Border-Dreieck-Technik erstellt - indem transparente Ränder auf drei Seiten und ein farbiger Rand auf einer Seite gesetzt werden, entsteht eine Dreiecksform. Das Tooltip wird mit dem :hover-Pseudo-Class auf dem Wrapper ein- und ausgeschaltet, wobei display oder visibility die Sichtbarkeit steuert. Für die Barrierefreiheit sollten Sie role="tooltip" und aria-describedby-Attribute hinzufügen. Die Eigenschaft white-space: nowrap verhindert das Umbruch von Text in kurzen Tooltips. Für längere Inhalte können Sie eine maximale Breite festlegen und white-space entfernen. Übergänge können für reibungslose Ein-/Ausblenden-Animationen mithilfe von Opazität und transform hinzugefügt werden.

Tips & Best Practices

1
Fügen Sie eine kurze Verzögerung vor dem Anzeigen hinzu, um versehentliche Auslösungen zu verhindern
2
Verwenden Sie aria-describedby für die Zugänglichkeit von Screenreadern
3
Halten Sie den Tooltip-Text kurz - idealerweise unter 150 Zeichen
4
Testen Sie die Positionierung des Tooltips in der Nähe der Bildschirmkanten, um Beschneidungen zu verhindern

Related Tools

CSS-Schaltflächen-Generator

Entwerfen Sie benutzerdefinierte CSS-Schaltflächen mit Farben, Abständen, Rändern, Schatten und Hover-Effekten.

🎨 CSS & Design

CSS-Karten-Generator

Erstellen Sie glasmorphische Karten-Designs mit Hintergrundverschleierung, Transparenz und Schattenkontrolle.

🎨 CSS & Design

CSS-Animationsgenerator

Erstellen Sie CSS-Keyframe-Animationen mit vorgefertigten Effekten und anpassbarer Zeitsteuerung.

🎨 CSS & Design

CSS-Übergangs-Generator

Erstellen Sie CSS-Übergänge mit anpassbaren Eigenschaften, Dauer, Verlauf und Hover-Effekten.

🎨 CSS & Design

Frequently Asked Questions

Q Funktionieren diese Tooltips auf mobilen Geräten?

CSS :hover-ToolTips funktionieren auf mobilen Geräten mit einem Tap, aber Sie sollten JavaScript für eine bessere Touch-Interaktionssteuerung verwenden.

Q Wie kann ich eine Verzögerung vor dem Anzeigen hinzufügen?

Fügen Sie transition-delay zu den Sichtbarkeits- und Opazitätseigenschaften des Tooltips hinzu, um ein verzögertes Erscheinen zu ermöglichen.

Q Kann ich den Tooltip sichtbar halten, wenn er gehovert wird?

Ja, wenden Sie die :hover-Pseudo-Klasse auf das Tooltip-Element selbst an, zusätzlich zum Wrapper.

Q Sind CSS-only-ToolTips zugänglich?

Für eine vollständige Zugänglichkeit sollten ARIA-Attribute hinzugefügt werden. Reine CSS-Lösungen können für Screenreader möglicherweise nicht ausreichend sein.

Q Wie kann ich verhindern, dass der Tooltip abgeschnitten wird?

Stellen Sie sicher, dass das Wrapper- oder ein übergeordnetes Element overflow: visible hat und prüfen Sie die Positionierung in der Nähe von Bildschirmkanten.

About This Tool

CSS-Tooltip-Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.