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 man damit alles machen kann?
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 beim Hover für schnelle Hinweise oder klicken Sie für dauerhafte Notizen, was auf Touchscreens besser funktioniert. Fügen Sie Eingangsanimation, Kontrolldauer und Versteckverzögerung hinzu, damit sich Tooltips glatt statt erschütternd anfühlen.
- 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 (Werkzeugspitzenelement): Sie benötigen einen neuen Hinweis, der auf die Seite gedroppt wird. Es bringt einen eigenen Triggertext oder ein eigenes Symbol.
Tooltips-erweiterung: Sie haben bereits eine Schaltfläche, ein Bild oder eine Überschrift und möchten einen Tooltip daran anhängen, einschließlich des Follow-Cursor-Modus.
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.
Wie fügen Sie es 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.
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 eigenständiges Widget mit eigenem Auslöser Die Erweiterung Fügt einen Tooltip an jedes vorhandene Widget, Abschnitt oder Container an und fügt den Follow Cursor-Modus hinzu Benötigen Sie einen neuen Hinweisfleck: Verwenden Sie das Element Benötigen Sie Tooltips zu Dingen, die sich bereits auf der Seite befinden: 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
Post-/Seitenduplikator
