Elementor Tooltip Widget - Hover Hints überall hinzufügen
Das Tooltip-Element ist ein eigenständiges Elementor-Widget Ziehen Sie es neben ein Formularfeld, in eine Preistabelle oder neben einen verwirrenden Begriff, und es rendert seinen eigenen Auslöser plus Tooltip-Blase Wenn Sie einen Tooltip an eine Schaltfläche, ein Symbol oder einen Abschnitt anhängen möchten, der bereits auf der Seite vorhanden ist, verwenden Sie die Tooltips-erweiterung Stattdessen.
Was Sie mit dem Tooltip-Widget tun können
Platzierungskontrolle
Schreiben Sie den Text des Tooltips, wählen Sie dann aus, wo die Blase erscheint: oben, unten, links, rechts, plus Start - und Endvarianten. Schalten Sie mit X - und Y-Pixel-Offsets fein ein, damit die Blase nie das abdeckt, was sie erklärt.
- Erklären Sie Formularfelder, Preise oder Fachjargon genau dort, wo die Frage auftaucht.
- Pin die Blase mit Offsets, so dass es Menüs, klebrige Kopfzeilen und nahe Knöpfe löscht.
- Führen Sie Benutzer durch mehrstufige Formulare mit kurzen kontextbezogenen Hinweisen.
Styling: Normal - und Hover-Zustände
Den Auslöser und die Blase separat gestalten Hintergrund, Textfarbe, Typografie, Polsterung, Randradius, Ränder und Kastenschatten festlegen Jede Eigenschaft verfügt über unabhängige Steuerelemente für den Normal - und Hover-Zustand.
- Passen Sie die Markenfarben genau an, anstatt mit grauen Browsereinstellungen zu leben.
- Machen Sie je nach Kontext subtile Hinweise (Geisterumriss) oder laute Hinweise (feste Pille mit Schatten).
- Stil-Hover-Feedback, damit Benutzer wissen, dass das Element interaktiv ist.
Auslöser und Animation
Auslösen im Hover für schnelle Hinweise, auf Klick für Notizen, die offen bleiben sollen (das funktioniert besser auf Touchscreens), oder mit einem benutzerdefinierten Auslöser Wählen Sie eine Eingangsanimation aus und stellen Sie die Dauer und die Verspätung ausblenden Sie den Folgen-Cursor ein, wenn die Blase der Maus folgen soll, was zu Karten und Diagrammen passt.
- Bewegen Sie den Mauszeiger für Desktop-Mikrokopien; Klicken Sie hier, um mobilfreundliche, dauerhafte Hinweise zu erhalten.
- Ein dezenter Fade - oder Skaleneingang zieht den Blick auf sich, ohne den Nutzer zu stören.
- Hide-Delay verhindert, dass der Tooltip flackert, wenn der Cursor vorbeiputzt.
Element oder Erweiterung: Welches benötigen Sie?
Diese Seite (Tooltip-Element, kostenlos): man braucht einen neuen Hinweis auf der Seite Das Widget bringt einen eigenen Auslöser, der kann Text, ein Icon oder ein Bild sein.
Tooltips-Erweiterung (Pro): Sie haben bereits einen Button, ein Bild oder eine Überschrift auf der Seite und möchten einen Tooltip daran anhängen.
Häufige Anwendungsfälle
- Formulare: “Passwort braucht 12+ Zeichen” neben der Eingabe, ohne das Formular zu verlängern.
- Preistabellen: definieren Sie “pro Sitzplatz” vs “pro Arbeitsfläche” inline.
- Buttons: klären Sie, was nach dem Klick passiert (“Keine Karte erforderlich”).
- Team / Einträge: Rolle, Bio-Snippet oder Kontaktkürzel im Schwebeflug.
- Onboarding: kurze Anweisungen neben neuen Funktionen oder Dashboard-Widgets.
So fügen Sie einen Tooltip in Elementor hinzu
- Widget fallen lassen In Elementor suchen Sie unter Master Addons nach “Tooltip” und ziehen Sie es dorthin, wo der Hinweis hingehört.
- Schreiben und Platzieren Geben Sie Text für den Tooltip ein, setzen Sie den Trigger (Hover oder Click), wählen Sie Platzierung und Offsets aus.
- Style it. Im Tab Style gibt Design Normal und Hover an: Farben, Typografie, Radius, Schatten. veröffentlichen.
- Möchten Sie Screenshots aus jeder Umgebung? Lesen Sie unseren Leitfaden auf So fügen Sie einen Tooltip in Elementor hinzu.
Häufig gestellte Fragen für Tooltip
Wofür ist das Tooltip-Element?
Hinzufügen von kurzem, hilfreichem Kontext, ohne das Layout zu überladen: Felderklärungen, Begriffsdefinitionen, Button-Klärungen, Inline-Anweisungen Alles Nicht-Wesentliche, das hilft, wenn man danach fragt.
Wie unterscheidet sich das von der Tooltips-Erweiterung?
Das Element ist ein freies, eigenständiges Widget mit eigenem Trigger Die Tooltips-erweiterung Ist Teil von Pro und fügt einen Tooltip an ein Widget, einen Abschnitt oder Container an, der sich bereits auf der Seite befindet Beide haben Follow Cursor, Platzierungsvoreinstellungen und Hover - oder Click-Trigger Brauchen Sie einen neuen Hinweis-Spot? Verwenden Sie das Element Benötigen Sie Tooltips zu Dingen, die bereits auf der Seite sind? Verwenden Sie die Erweiterung.
Kann ich normale und Hover-Zustände getrennt stylen?
Ja. Die Registerkarte Stil verfügt über unabhängige Normal- und Hover-Steuerelemente für Hintergrund, Text, Ränder, Radius und Schatten.
Wie kontrolliere ich, wo die Blase erscheint?
Platzierungsvoreinstellungen verwenden (oben, unten, links, rechts, plus Start - und Endvarianten), dann mit X - und Y-Offsets in Pixeln anstupsen.
Mit dem Mauszeiger oder Klick: welchen Trigger soll ich verwenden?
Bewegen Sie den Mauszeiger für schnelle Desktop-Hinweise; Klicken Sie auf alles, was auf Touchscreens funktionieren muss, da Hover auf Mobilgeräten nicht existiert.
Wird es meine Seite verlangsamen?
Nein. Es lädt nur sein eigenes kleines CSS und JS, wenn es auf der Seite vorhanden ist Eine Handvoll Tooltips pro Seite hat keine spürbaren Auswirkungen.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
