Manchmal braucht ein Design eine kurze Erklärung, ohne ihm eine vollständige Zeile auf der Seite zu gebenDas ist die Aufgabe eines Tooltips: Eine kleine Blase, die im Schwebeflug erscheint, ihr Stück sagt und aus dem Weg geht Die Tooltip-widget In Master-Addons für Elementor Befestigt diese Blase an einem Symbol, einem Textstück oder einem Bild, mit Kontrolle über Platzierung, Animation, Trigger und Styling.
Dieser Leitfaden geht durch das Widget vom ersten Drag bis zu einem gestylten Tooltip auf der Live-Seite.
Was das Tooltip-Widget macht #
Das Widget platziert ein kleines Zielelement auf Ihrer Seite, ein Symbol, einen Text oder ein Bild, und bindet eine Tooltip-Blase daran Wenn Besucher mit der Maus oder auf das Ziel klicken, erscheint die Blase mit Ihrer Nachricht Platzierung, Animation, Timing und Offsets sind alle konfigurierbar, und die Registerkarte Stil deckt sowohl das Ziel als auch die Blase ab.
Dies ist ein eigenständiges Widget: Das Ziel und sein Tooltip sind der springende Punkt Wenn Sie Tooltips zu Widgets hinzufügen möchten, die Sie bereits auf der Seite haben, liefert Master Addons auch eine Tooltip-Erweiterung, die an jedes Elementorelement angeschlossen wird. Das Widget ist die richtige Wahl, wenn das Tooltip-Ziel ein eigenes kleines Designelement ist, wie ein Informationssymbol neben einem Preis oder ein Team-Avatar mit einer Namensblase.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Das Tooltip-Widget ist im Master-Addons-Optionsfeld unter Basis-Widgets aktiviert.
So fügen Sie das Tooltip-Widget hinzu #
Suchen Sie im Elementor-Editor nach Elemente Panel für Tooltip Und ziehen Sie das Widget auf Ihre Seite Es wird mit einem Info-Symbol als Standardziel und einem bereits verkabelten Platzhalter-Tooltip geladen, sodass das Schweben des Symbols auf der Leinwand die Blase sofort anzeigt.
Wählen Sie den Inhaltstyp: Symbol, Text oder Bild #
Offen Inhaltseinstellungen Im Reiter Inhalt Die Inhaltstyp Der Umschalter an der Spitze bietet drei Ziele:
- Symbol: Wählen Sie ein beliebiges Symbol aus der Elementor-Bibliothek aus Der klassische Infokreis ist die Voreinstellung.
- Text: Geben Sie ein Wort oder eine Phrase ein, wie “Hover Me!”, und der Tooltip hängt daran.
- Bild: Wählen Sie ein Bild aus der Mediathek, nützlich für Avatare und Produkt-Thumbnails.
Für jeden Typ gelten zwei Steuerelemente. Ausrichtung Platziert das Ziel links, in der Mitte oder rechts. HTML-Tag Wickelt das Ziel in das Markup, das Sie auswählen: H1 bis H6, div, span, p, button oder a. Stick mit p oder span für einfache Tooltips; Verwenden Sie die Taste, wenn das Ziel wie eine Steuerung für die Zugänglichkeit fungieren soll.
Mit Text Ausgewählt, ersetzt ein Inhaltsfeld den Symbolauswahl:
Mit Bild Ausgewählt öffnet sich die Mediathek und das gewählte Bild wird zum Hover-Ziel:
Schreiben Sie den Tooltip und stellen Sie sein Verhalten ein #
Die Tooltip-optionen Abschnitt steuert die Blase selbst.
- Tooltip-Text: Die Nachricht im Inneren der Blase Halten Sie es auf einer Linie oder zwei; Tooltips sind für Hinweise, nicht Absätze.
- Folgen Cursor: Lassen Sie die Blase die Maus verfolgen, anstatt am Ziel festzuhalten.
- Platzierung: Wo die Blase relativ zum Ziel sitzt Top ist die Standardeinstellung, wobei Top Start, Bottom, und die anderen Kanten verfügbar sind.
- Animation: Wie die Blase eintritt, Shift-Away standardmäßig.
- Auslösen auf: Hover zeigt die Blase auf Mouseover; Click wartet auf einen Tipp, der auch auf Touchscreens besser funktioniert.
- Dauer und Verzögerung: Animationsgeschwindigkeit und wie lange die Blase nach dem Verlassen des Cursors verbleibt, beide standardmäßig 300 Millisekunden Die Standardwerte fühlen sich für die meisten Seiten richtig an; verlangsamen Sie sie nur, wenn der Tooltip etwas enthält, das Besucher länger zum Lesen benötigen.
Die X-Offset und Y-versatz Schieberegler stoßen die Blase von ihrer Standardstelle weg. Nützlich, wenn die Werkzeugspitze einen Rand freigeben oder neben einem seltsam geformten Ziel sitzen muss.
Das Ziel stylen #
In der Stil Tab Allgemeine Stile Das Zielelement auf der Seite abdeckt.
- Inhaltsbreite und Auffüllung: Die Größe des Zielblocks Die Demo erweitert ihn von 150 auf 215 Pixel, um dem Avatar Raum zu geben.
- Normal- und Hover-Zustände: Hintergrundfarbe, Textfarbe, Kastenschatten und Typografie für jeden Zustand.
- Grenztyp und Grenzradius: Rahmen das Ziel; ein Radius von 4 Pixeln hält Ecken weich.
Stylen Sie die Tooltip-Blase #
Die Tooltip-stile Abschnitt stylt die Blase und die Leinwand gibt während der Arbeit eine Live-Vorschau.
- Breite der Werkzeugspitze: Die maximale Breite der Blase, standardmäßig 200 Pixel Text wickelt sich darin ein.
- Hintergrundfarbe und Textfarbe: Die Demo wird dunkelmarinefarben mit weißem Text, dem klassischen kontrastreichen Tooltip-Look.
- Typografie, Polsterung, Rand: Text und Rahmen der Blase.
- Entfernung: Die Lücke zwischen Blase und Ziel, standardmäßig 10 Pixel.
- Textausrichtung und Box Shadow: Die letzten Berührungen Ein weicher Schatten hilft der Blase, als über der Seite schwebend zu lesen.
Das Ergebnis auf der Seite #
Auf der Live-Seite sitzt das Ziel ruhig, bis ein Besucher es schwebt. Dann belebt sich die Blase an der von Ihnen gewählten Stelle, hält, während der Cursor bleibt, und verblasst nach der von Ihnen festgelegten Verzögerung.
Häufige Anwendungsfälle #
- Info-symbole Neben Preisreihen, Formularbeschriftungen und Funktionslisten.
- Team Avatare Die einen Namen und eine Rolle auf hover offenbaren.
- Glossarbegriffe Im Text, mit einer kurzen Definition in der Blase.
- Produkt-thumbnails Mit einer Spezifikation oder einem Hinweis, der keinen Seitenplatz verdient.
- Nur-symbol-tasten Wo der Tooltip die Aktion benennt.
Tipps für bessere Tooltips #
- Halten Sie den Text kurz. Ein oder zwei Zeilen, wenn die Nachricht mehr braucht, gehört sie ins Layout, kein Tooltip.
- Klicken Sie für Touch-Besucher auf den Click-Trigger. Hover gibt es auf Telefonen nicht; Ein klickgesteuerter Tooltip funktioniert überall.
- Achten Sie auf den Kontrast. Dunkle Blase, heller Text, oder umgekehrt Die Standardbreite von 200 Pixeln mit 10 Polstern liest sich bei typischen Schriftgrößen gut.
- Überprüfen Sie die Platzierung in der Nähe der Bildschirmränder. Ein Top-Tooltip auf dem ersten Element einer Seite kann clippen; Schalten Sie es nach unten oder verwenden Sie die Offsets.
- Verstecken Sie kritische Informationen nicht in Tooltips. Alles, was Besucher lesen müssen, gehört auf die Seite; Die Blase ist für Extras gedacht.
Video-Tutorial #
Wenn Sie den Tooltip lieber in Aktion ansehen möchten, deckt dieses kurze Video das gesamte Setup ab, vom Ziehen des Widgets bis zur gestylten Blase auf der Live-Seite.
Häufig gestellte Fragen #
Was ist das Tooltip-Widget in Master Addons?
Es handelt sich um ein Elementor-Widget, das ein Symbol, einen Text oder ein Bild auf der Seite platziert und eine Tooltip-Blase daran befestigt. Die Blase erscheint im Mauszeiger oder Klick und Sie steuern ihre Platzierung, Animation, Zeitmessung, Offsets und das vollständige Styling über das Elementor-Panel.
Kann das Tooltip-Ziel ein Bild sein?
Ja. Setzen Sie den Inhaltstyp in den Inhaltseinstellungen auf das Bild und wählen Sie ein beliebiges Bild aus der Mediathek aus. Der Tooltip erscheint dann, wenn Besucher mit der Maus fahren oder auf das Bild klicken, was zu Team-Avataren und Produkt-Thumbnails passt.
Kann ich den Tooltip auf Klick statt mit dem Mauszeiger anzeigen?
Ja. Ändern Sie in Tooltip-Optionen den Auslöser von Hover auf Click. Auch auf Telefonen und Tablets, wo Hover nicht existiert, verhält sich das Auslösen von Klicks besser.
Wie ändere ich, wo der Tooltip erscheint?
Verwenden Sie die Platzierungs-Dropdown in Tooltip-Optionen, um oben, unten oder eine Start- oder Endvariante jeder Kante auszuwählen. Die X-Offset- und Y-Offset-Schieberegler stimmen dann die genaue Position fein ab und Distance legt die Lücke zum Ziel fest.
Kann ich die Tooltip-Blase stylen?
Ja. Der Abschnitt Tooltip-Stile im Register Stil steuert die Breite, Hintergrundfarbe, Textfarbe, Typografie, Auffüllung, Umrandung, Entfernung vom Ziel, Textausrichtung und den Kastenschatten der Blase. Der Editor zeigt Vorschauen von Änderungen live an.
Einwickelnd #
Das Tooltip-Widget verarbeitet das gesamte Hinweisblasenmuster an einer Stelle: Wählen Sie ein Symbol, einen Text oder ein Bildziel aus, schreiben Sie die Nachricht, setzen Sie den Auslöser und die Platzierung und gestalten Sie beide Hälften aus dem Elementorfeld Durchsuchen Sie den vollständigen Satz von Master Addons Widgets und Erweiterungen Für die Tooltip-Erweiterung und alles andere im Feld, und siehe die Preisseite Für das, was Pro hinzufügt.
