Wie kann man Elementor Tooltip bei Hover oder Click hinzufügen?

Überall hast du Tooltips gesehen Bewege dich über ein Symbolleistensymbol in Google Docs und ein kleines Label sagt dir, was diese Schaltfläche macht Das ist ein Tooltip In WordPress kannst du mit Tooltips kurze Hinweise hinzufügen, die erscheinen, wenn jemand auf deiner Seite mit der Maus über ein Element schwebt (oder klickt) Keine extra Seite Immobilien, kein überladenes Layout.

Master Addons for Elementor bietet Ihnen zwei Möglichkeiten, Tooltips hinzuzufügen: die Tooltip-elementEin eigenständiges Widget, das Sie auf die Seite legen, und das Tooltip-erweiterung, der einen Tooltip an jedes bereits vorhandene Elementor-Widget, Abschnitt oder Container anhängt. Diese Anleitung behandelt beide Methoden, wann sie verwendet werden sollen und wie man sie stylt.

Was sind Tooltips und warum sind sie wichtig?

Ein Tooltip ist eine kurze Nachricht, die erscheint, wenn ein Besucher mit seinem Cursor über ein bestimmtes Element auf Ihrer Seite fährt Auf WordPress-Seiten dienen Tooltips einigen praktischen Zwecken:

• Begriffe erklären, ohne den Fluss zu unterbrechen. Wenn Ihre Inhalte Jargon verwenden, können Leser über einen Tooltip schnell eine Definition im Hover erhalten, ohne den Absatz zu unterbrechen.
• Fügen Sie Kontext zu Bildern und Symbolen hinzu. Wenn Sie Produktsymbole, Teammitgliedsfotos oder Funktionssymbole anzeigen, bietet ein Tooltip zusätzliche Details, ohne visuellen Platz zu beanspruchen.
• Seiten sauber halten. Anstatt jede Information in das sichtbare Layout zu packen, verbergen Tooltips sekundäre Details, bis der Leser sie tatsächlich haben möchte.
• Engagement verbessern. Interaktive Elemente wie Tooltips regen Besucher dazu an, Ihre Inhalte zu erkunden Seiten, die zur Interaktion einladen, halten die Aufmerksamkeit tendenziell länger aufrecht.

Was Sie brauchen werden

• WordPress auf Ihrer Seite installiert
• Master-Addons für Elementor Installiert und aktiviert (kostenlose Version funktioniert)
• Elementor-Seitenersteller (kostenlos oder pro)

Master Addons ist ein WordPress-Plugin mit 80+ Widgets und Erweiterungen Für Elementor, einschließlich der beiden hier behandelten Tooltip-Funktionen.

Tooltip Element vs. Tooltip Extension: welches sollten Sie verwenden?

Sie lösen verschiedene Probleme Die richtige zu wählen spart Zeit.

Die Kurzfassung:

• Müssen Sie einer Überschrift, Schaltfläche oder einem Widget, das sich bereits auf Ihrer Seite befindet, einen Tooltip hinzufügen? Verwenden Sie die Tooltip-erweiterung.
• Benötigen Sie einen dedizierten Inhaltsblock, bei dem Benutzer mit der Maus über bestimmte Texte, Bilder oder Symbole fahren, um Tooltip-Inhalte anzuzeigen? Verwenden Sie die Tooltip-element.

Beides kann man auf der gleichen Seite verwenden, die stehen nicht im Widerspruch zueinander.

Methode 1: So fügen Sie Tooltip in Elementor mit dem Tooltip-Element hinzu

Die Tooltip-element Ist ein eigenständiges Widget Sie ziehen es auf Ihre Seite und Benutzer bewegen sich mit der Maus über Text, ein Bild oder ein Symbol, um eine Tooltip-Nachricht anzuzeigen.

Verwenden Sie dies, wenn Sie Bild-Tooltips, Text-Tooltips oder Symbol-Tooltips als speziellen Abschnitt Ihrer Seite erstellen möchten.

Schritt 1: Öffnen Sie Ihre Seite in Elementor

Navigieren Sie von Ihrem WordPress-Dashboard aus zu der Seite, die Sie bearbeiten möchten, und klicken Sie darauf Mit Elementor bearbeiten.

Schritt 2: Suche nach dem Tooltip-Widget

Geben Sie im Elementor-Widget-Panel auf der linken Seite in der Suchleiste “Tooltip” ein Die MA Tooltip Widget erscheint unter der Rubrik Master Addons Ziehen Sie es auf Ihre Seite, auf der der Tooltip angezeigt werden soll.

Schritt 3: Wählen Sie Ihren Inhaltstyp

Klicken Sie auf das Widget, um dessen Einstellungen zu öffnen Unter der Inhalt Tab, die Inhaltstyp Option gibt Ihnen drei Möglichkeiten:

• Text. Besucher bewegen sich mit der Maus über Ihren Text, um die Tooltip-Nachricht zu sehen.
• Bild. Besucher bewegen sich mit der Maus über ein Bild, um den Tooltip zu sehen.
• Symbol. Besucher bewegen sich mit der Maus über ein Symbol, um zusätzliche Informationen preiszugeben.

Wählen Sie den Inhaltstyp aus, der zu Ihrem Anwendungsfall passt.

Schritt 4: Richten Sie den Inhalt des Tooltips ein

Nachdem Sie Ihren Inhaltstyp ausgewählt haben, konfigurieren Sie beide Teile:

Der Trigger-Inhalt (was Besucher auf der Seite sehen):

• Für Text: Geben Sie das Wort ein oder die Phrase, über die Besucher mit der Maus fahren
• Für Bild: Laden Sie ein Bild aus Ihrer WordPress-Mediathek hoch
• Für Symbol: Wählen Sie ein Symbol aus der Symbolbibliothek aus

Der Inhalt des Tooltips (was im Schwebeflug erscheint):

• Gehe zu den Einstellungen für die Kurzinfos Abschnitt
• Geben Sie Ihren Tooltip-Text in den integrierten Editor ein
• Sie können den Text mit Fettdruck, Kursivschrift, Links und mehr formatieren

Schritt 5: Konfigurieren Sie die Richtung und Geschwindigkeit des Tooltips

Stellen Sie in den Einstellungen für die Tooltip ein, wie die Tooltip angezeigt wird:

• Tooltip-richtung. Wählen Sie aus, wo die Symbolleiste relativ zum Auslöser angezeigt wird: oben, unten, links oder rechts.
• Werkzeugspitzengeschwindigkeit. Stellen Sie die Animationsgeschwindigkeit in Millisekunden ein Niedrigere Werte lassen sie schneller erscheinen.

Tipp: Halten Sie die Geschwindigkeit der Werkzeugspitze zwischen 300-500 ms. Zu schnell fühlt sich abrupt an, zu langsam fühlt sich nicht an.

Schritt 6: Stylen Sie Ihren Tooltip

Wechseln Sie zu den Stil Tab, um das Aussehen Ihres Elementor-Tooltip-Widgets anzupassen:

• Inhalt Max Breite. Steuert, wie breit die Tooltip-Box werden kann.
• Hintergrundfarbe. Stellen Sie den Hintergrund der Tooltip ein.
• Textfarbe. Ändern Sie die Schriftfarbe des Tooltips.
• Typografie. Passen Sie Schriftfamilie, Größe, Gewicht und Abstand an.
• Kastenschatten. Tiefe mit Schatteneffekt hinzufügen.
• Grenze. Ränder hinzufügen und Ränderradius für abgerundete Ecken festlegen.
• Polsterung. Steuern Sie den Abstand zwischen den Text- und Tooltip-Kanten.

Sie können verschiedene Stile für die Normal und Schweben Staaten, um visuelles Feedback hinzuzufügen.

Unterhalb der allgemeinen Stile, der Tooltip-stile Abschnitt gibt Ihnen die Kontrolle über die Blase selbst Stellen Sie die Breite der Kurzinfo in Pixeln ein, wählen Sie Hintergrund - und Textfarben aus, passen Sie die Typografie an, konfigurieren Sie die Polsterung auf allen vier Seiten, wählen Sie einen Randtyp, setzen Sie den Randradius für abgerundete Ecken, steuern Sie den Abstand zwischen dem Auslöser und der Blase, richten Sie Text innerhalb der Kurzinfo aus und fügen Sie einen Kastenschatten für die Tiefe hinzu.

Für eine vollständige Komplettlösung jeder Einstellung überprüfen Sie die Tooltip-Elementdokumentation Oder beobachten Sie die Video-tutorial.

Methode 2: So fügen Sie mit der Tooltip-Erweiterung Tooltip zu einem beliebigen Elementor-Widget hinzu

Die Tooltip-erweiterung Funktioniert anders als das Element Anstatt ein eigenständiges Widget zu sein, fügt es ein hinzu Tooltip Abschnitt zur Registerkarte Erweitert jedes Elementorelements Wählen Sie ein beliebiges Widget, einen Container, eine Spalte oder einen Abschnitt aus, der bereits auf Ihrer Seite vorhanden ist, drehen Sie den Schalter um, geben Sie Ihren Text ein, und Besucher sehen eine kleine Blase, wenn sie mit der Maus über dieses Element fahren Jedes Element trägt einen eigenen Tooltip, sodass sich drei Karten hintereinander jeweils mit unterschiedlichem Text erklären können.

Die Erweiterung teilt sich in zwei Untertabs auf: Einstellungen Für Verhalten (Text, Platzierung, Animation, Trigger, Timing) und Stil für Looks (Farben, Breite, Polsterung, Typografie).

Schritt 1: aktivieren Sie die Tooltip-Erweiterung

Gehen Sie von Ihrem WordPress-Dashboard aus zu Master Addons Und öffnen Sie die Erweiterungen Tab. Tooltips sitzt im Dynamische Widgets Gruppe. Klicken Sie auf den Umschalter, damit er violett wird, und schlagen Sie dann Änderungen speichern Oben und warten Sie auf den grünen Hinweis “Einstellungen erfolgreich gespeichert”.

Schritt 2: Öffnen Sie Ihre Seite in Elementor

Navigieren Sie zu der Seite, die Sie bearbeiten möchten, und klicken Sie auf Mit Elementor bearbeiten.

Schritt 3: Wählen Sie ein beliebiges Element aus

Klicken Sie auf ein beliebiges vorhandenes Element, wo Sie einen Tooltip hinzufügen möchten Dies funktioniert mit Überschriften, Schaltflächen, Bildern, Symbolen, Preistabellen, Containern, Spalten, Abschnitten und jedem Elementor-Widget oder Master-Addons-Element Der Tooltip-Abschnitt erscheint auf der Registerkarte Erweitert jedes Elements.

Schritt 4: Gehen Sie zur Registerkarte Erweitert und aktivieren Sie den Tooltip

Klicken Sie mit dem ausgewählten Element auf die Fortgeschritten Reiter im Einstellungsfeld Scrollen Sie nach unten, bis Sie die Tooltip Abschnitt mit dem lila MA-Abzeichen Erweitern und das Umdrehen der Tooltip Wechseln Sie zu Ja. Zuerst öffnet sich die Untertab Einstellungen.

Schritt 5: Konfigurieren der Einstellungen für den Tooltip

Die Untertabelle Einstellungen gibt Ihnen die Kontrolle darüber, wie sich der Tooltip verhält:

• Inhalt: Der Text mit dem Tooltip. tippen Sie ihn ein, oder verwenden Sie den Link Schreiben mit KI, wenn Sie einen Ausgangspunkt wünschen.
• Platzierung: Welche Seite des Elements die Blase bevorzugt: oben (Standard), unten, links oder rechts.
• Folgen Cursor: macht den Tooltip trail der Maus statt still zu sitzen Nützlich für Karten, Diagramme, und Diagramme, wo jeder Bereich unter dem Cursor eine eigene Beschriftung benötigt.
• Animation: Wie die Blase eintritt Sieben Möglichkeiten: Keine, Fade, Shift-Away, Shift-Toward, Skala, Perspektive und Fill-Effekt.
• Auslöser: Was öffnet den Tooltip. Fahren Sie standardmäßig mit der Maus oder klicken Sie für Touchscreen-freundliche dauerhafte Hinweise.
• Dauer und Verzögerung: Die Animationsgeschwindigkeit in Millisekunden und wie lange die Blase verbleibt, bevor sie sich schließt.
• X- und Y-Offset: Stupsen Sie die Blase um eine bestimmte Anzahl von Pixeln von ihrer Standardstelle weg.
• Pfeil und Pfeiltyp: Fügen Sie den kleinen Zeiger hinzu, der Blase mit Element verbindet, mit scharfen oder runden Stiloptionen.

Schritt 6: Stylen Sie den Tooltip

Wechseln Sie zu den Stil Untertab, damit die Blase zu Ihrem Design passt, anstatt wie eine Browser-Standardeinstellung auszusehen.

• Maximale Breite: Kappen Sie, wie breit die Blase wächst, so lange Textumschläge, anstatt sich über den Bildschirm zu erstrecken.
• Text, Hintergrund und Pfeilfarbe: Vollfarbsteuerung, einschließlich des Zeigers.
• Polsterung, Randtyp und Grenzradius: Die Form der Blase.
• Textausrichtung, Kastenschatten und Typografie: Beenden Sie den Look mit Ihrer eigenen Schriftart und Tiefe.

Schritt 7: Überprüfen Sie das Ergebnis

Speichern und die Seite anzeigen Bewegen Sie den Mauszeiger über das Element und der Tooltip blendet mit dem Text ein, den Sie geschrieben haben, und verwenden Sie die Animation, die Farben und die Breite, die Sie eingestellt haben Bewegen Sie den Cursor weg und er schließt sich nach der Verzögerung für die anderen Elemente auf der Seite wiederholen.

Ausführliche Konfigurationsdetails finden Sie im Tooltip-Erweiterungsdokumentation Oder beobachten Sie die Video-tutorial.

Praktische Anwendungsfälle für jede Methode

Wann das Tooltip-Element verwendet werden soll

Das Tooltip-Element ist ein dedizierter Inhaltsblock Verwenden Sie es, wenn Tooltips der Hauptpunkt des Abschnitts sind:

• Feature-Showcase-Seiten. Produktfunktionen als Symbole oder Bilder mit Tooltip-Beschreibungen anzeigen.
• Glossarabschnitte. Erstellen Sie ein Inline-Glossar, in dem Leser mit der Maus über Begriffe fahren, um Definitionen anzuzeigen.
• Portfolioartikel. Fügen Sie Bild-Tooltips zu Portfolio-Miniaturansichten hinzu, die Projektdetails zeigen.
• Team-seiten. Platzieren Sie Symbole oder Fotos mit Tooltip-Details zu Teamrollen.
• Bildungsinhalte. Lassen Sie die Schüler mit der Maus über Schlüsselwörter fahren, um Erklärungen anzuzeigen, ohne die Seite zu verlassen.

Wann Sie die Tooltip-Erweiterung verwenden sollten

Die Tooltip-Erweiterung fügt Kontext zu Elementen hinzu, die bereits auf Ihrer Seite vorhanden sind:

• Feature-karten. Ein Satz mit extra Details, ohne die Karte zu verlängern.
• Preistabellen. Erklären Sie, was “Prioritätsförderung” eigentlich abdeckt, genau dort, wo sich die Leute wundern Sehen Sie unsere Preistabellen-Widget Für mehr.
• Tasten und Icons. Nur Symbol-Steuerelemente beschriften, damit niemand ratet.
• Teammitglieder. Eine lustige Fakten- oder Rollennotiz, die über jedem Foto schweben kann.
• Fachbegriffe. Kurze Definitionen im Fachjargon, günstiger als eine Glossarseite.

Kombination beider Methoden

Sie können beides auf derselben Seite verwenden. Verwenden Sie beispielsweise das Tooltip-Element, um einen Funktionsvergleichsbereich zu erstellen, in dem Besucher mit der Maus über Symbole fahren, um mehr über jede Funktion zu erfahren. Verwenden Sie dann die Tooltip-Erweiterung auf Ihrer CTA-Taste unten, um eine „Kostenlose 14-Tage-Testversion“zu hinzufügen. Keine Kreditkarte erforderlich”-Tooltip.

Es gibt keinen Konflikt zwischen beiden Sie dienen unterschiedlichen Zwecken und können auf jeder Seite nebeneinander existieren.

Tooltip Best Practices für WordPress

• Kurz den Text des Tooltips halten. 1-2 Sätze anvisieren, wenn man mehr braucht, dann gehört die Information wahrscheinlich auf die Seite selbst, nicht versteckt in einem Tooltip.
• Verwenden Sie eine konsistente Positionierung. Wählen Sie eine Richtung (oben oder unten funktioniert in den meisten Fällen am besten) und bleiben Sie auf Ihrer Website dabei. Das Mischen von Positionen fühlt sich zufällig an.
• Tooltips nicht überstrapazieren. Wenn jedes Element auf Ihrer Seite einen Tooltip hat, werden sich die Besucher nicht die Mühe machen, mit dem Mauszeiger über eines davon zu fahren Verwenden Sie es dort, wo es wirklich einen Mehrwert bietet.
• Stellen Sie sicher, dass Tooltips mobil funktionieren. Hover gibt es auf Touchscreens nicht Die Tooltip-Erweiterung unterstützt Klick-Trigger, die für mobile Nutzer besser funktionieren Testen Sie Ihre Tooltips vor der Veröffentlichung auf einem Telefon.
• Passen Sie das Design Ihrer Website an. Passen Sie die Farben, Schriftarten und Ränder der Tooltips an Ihr bestehendes Theme an Standard-Tooltip-Stift kann auf einer polierten Website fehl am Platz aussehen.

Tooltip Element vs. Tooltip Extension: schneller Vergleich

Beide Funktionen sind verfügbar in Master-Addons für Elementor. Sie können mit der kostenlosen Version beginnen und auf upgraden Pro Für erweiterte Styling-Optionen und zusätzliche Widgets.

Häufig gestellte Fragen

Beginnen Sie mit dem Hinzufügen von Tooltips zu Ihrer WordPress-Website

Mit Master Addons erhalten Sie zwei Optionen: die Tooltip-element Zum Erstellen dedizierter Tooltip-Inhalte mit Text-, Bild- und Symboltriggern und dem Tooltip-erweiterung Zum Hinzufügen von Tooltips zu einem vorhandenen Elementorelement auf Ihrer Seite.

Beide Methoden funktionieren out of box Sie können sich auch die Bild Hotspot Widget Wenn Sie interaktive Tooltips benötigen, die an bestimmte Orte auf einem Bild angeheftet werden.

Master Addons für Elementor herunterladen Anzustoßen.