Softonic

CSS-Tooltip-Generator

Schritt 1 / 2
Nächste

Tooltips sind oft der erste Ort, an dem ein Projekt auf eine JavaScript-Bibliothek zurückgreift, aber ein einfaches ::after-Pseudo-Element, das durch ein data-tooltip-Attribut gesteuert wird, deckt 90 % der realen Fälle ab. Dieser Generator gibt die genauen .tooltip- und .tooltip::after-Regeln aus, die Sie benötigen, wählen Sie die Position oben, unten, links oder rechts, passen Sie die Hintergrund- und Textfarbe an und kopieren Sie den Block in Ihr Stylesheet.

So integrieren Sie den Tooltip in Ihr HTML

  1. 1

    Wählen Sie eine Position

    Oben, unten, links oder rechts. Der Generator verwendet `calc(100% + 8px)` plus die richtige Transformation, damit die Blase bündig am Auslöser sitzt.

  2. 2

    Farben auswählen

    Der Hintergrund steuert die Blase, die Textfarbe wird auf das Tooltip-Label angewendet. Halten Sie den Kontrast bei 4.5:1 oder besser für die Lesbarkeit.

  3. 3

    Kopieren Sie das CSS

    Fügen Sie den generierten Block in Ihr Stylesheet ein. Es bietet `.tooltip`, `.tooltip::after` und eine `:hover`-Regel.

  4. 4

    Markieren Sie den Auslöser

    Fügen Sie `class="tooltip" data-tooltip="Ihr Text"` zu einem beliebigen Element hinzu. Das `::after` liest das Attribut über `content: attr(data-tooltip)`.

Reine CSS-Tooltips: Was Sie gewinnen und was Sie aufgeben

Ein CSS-Tooltipp ist klein, schnell und funktioniert auch mit deaktiviertem JavaScript. Er lebt jedoch innerhalb der Quellreihenfolge des DOM und erbt daher einige Einschränkungen, um die Sie herumdesignen müssen.

Was das generierte CSS tut

  • Setzt den Auslöser auf position: relative, sodass der absolute Tooltip daran verankert ist.
  • Zieht das Label von content: attr(data-tooltip), was bedeutet, dass Sie den Text niemals duplizieren.
  • Animiert die Opazität mit transition: opacity 0.15s, sodass das Erscheinen schnell, aber nicht abrupt wirkt.
  • Verwendet pointer-events: none auf der Blase, sodass sie niemals Klicks auf den Auslöser blockiert.

Positionierungs-Mathematik

Position Offset-Regel
oben bottom: calc(100% + 8px); left: 50%; translateX(-50%)
unten 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%)

Barrierefreiheitshinweise

  • data-tooltip wird von Screenreadern nicht gelesen. Wenn die Information wesentlich ist, kombinieren Sie sie mit aria-label oder sichtbarem Text.
  • Tastaturbenutzer benötigen :focus-visible sowie :hover. Erweitern Sie die generierte Regel auf .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Tooltips, die durch overflow: hidden bei einem Vorfahren abgeschnitten werden, verschwinden. Bewegen Sie den Auslöser aus dem Beschneidungscontainer oder wechseln Sie zu einem JS-gerenderten Popover für dichte UIs.

Häufig gestellte Fragen

Ein Pseudo-Element hält das DOM sauber, vermeidet die Duplizierung des Label-Texts und ermöglicht es Ihnen, den Tooltip zu stylen, ohne sich Sorgen zu machen, andere Elemente versehentlich zu treffen. Der Nachteil ist, dass der Inhalt von ::after nicht von Hilfstechnologien indiziert werden kann, daher verstärken Sie kritischen Text mit aria-label.

Ja, fügen Sie ein zweites Pseudo-Element hinzu, zum Beispiel .tooltip::before, das mit einer Box mit null Breite/Höhe und farbigen Rändern geformt ist. Es ist ein klassischer CSS-Dreieckstrick; der Geschwister-CSS-Dreiecksgenerator in diesem Paket erzeugt die genauen Randdeklarationen, die Sie benötigen.

Fügen Sie transition-delay: 0.3s zur ::after-Regel hinzu, setzen Sie es jedoch beim Hover-Out auf null zurück, oder verwenden Sie transition: opacity 0.15s 0.3s;, um das Erscheinen zu verzögern, ohne das Schließen zu verzögern.

Die von Ihnen gewählte Position und die Farben werden an unseren Server gesendet, um das CSS zu erzeugen, aber nicht gespeichert oder weiterverwendet. Auf der mehrstufigen Seite wandern sie im Seitenlink zwischen den Schritten; in der einseitigen Ansicht wird nichts aufbewahrt.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

HAR-Datei-Viewer

HAR-Netzwerkaufzeichnungen lokal öffnen, Anfragen filtern, maskierte Header und Zeitwerte prüfen und bereinigte Zusammenfassungen exportieren.

Tool in anderen Sprachen verfügbar