Tooltip

Einige Details verdienen keinen ganzen Absatz auf der Seite Eine kurze Notiz, die auf hover erscheint, erledigt die Arbeit, wie extra Kontext auf einer Feature-Karte oder ein Label auf einem Icon-only Button Elementor hat dafür keine eingebaute Möglichkeit, also die Tooltip Erweiterung in Master-Addons für Elementor Fügt jedem Element einen auf der Registerkarte Erweitert hinzu.

Sie schreiben den Text mit dem Tooltip, wählen aus, wo er erscheint und wie er animiert, und stylen ihn dann wie jeden anderen Teil Ihres Designs Kein Shortcode und kein CSS.

Was die Tooltip-Erweiterung bewirkt #

Sobald aktiviert, erhält jedes Elementorelement eine Tooltip Abschnitt unter der Fortgeschritten Tab. Schalten Sie es für ein Element ein, geben Sie den Text ein, und Besucher sehen eine kleine Blase, wenn sie auf der Live-Seite mit der Maus über dieses Element fahrenJedes Element trägt einen eigenen Tooltip, so dass 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).

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? folgen Sie dem Installationsführung Zuerst.
• Tooltips ist eine kostenlose Erweiterung, daher ist keine Pro-Lizenz erforderlich.

So 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 mit einem beliebten Abzeichen, neben Dynamische Tags und Wrapper Link. Klicken Sie auf den Knebel, damit er lila wird, und schlagen Sie dann Änderungen speichern Oben und warten Sie auf den grünen Hinweis “Einstellungen erfolgreich gespeichert”.

Fügen Sie einem Element einen Tooltip hinzu #

Öffnen Sie Ihre Seite mit Elementor und wählen Sie das Element aus Im Videobeispiel handelt es sich um eine Info-Box-Karte in einer dreispaltigen Feature-Zeile Gehen Sie zu der Fortgeschritten Tab, öffnen Sie die Tooltip Abschnitt mit dem lila MA-Abzeichen und drehen Sie das um Tooltip Wechseln Sie zu Ja. Zuerst öffnet sich die Untertab Einstellungen.

Einstellungen erklärt #

• 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 die Tooltip trail der Maus statt still zu sitzen.
• 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, schweben Sie standardmäßig mit der Maus.
• 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 von ihrer Standardstelle weg.
• Pfeil und Pfeiltyp: Fügen Sie den kleinen Zeiger hinzu, der die Blase mit dem Element verbindet, scharf oder rund.

Gestalten 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, wie breit die Blase wächst, 200 px in der Demo, so lange Text-Wraps statt über den Bildschirm zu strecken.
• 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.

Das Ergebnis auf der Seite #

Speichern und die Seite anzeigen Bewegen Sie den Mauszeiger über die Karte 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.

Wiederholen Sie die anderen Elemente auf der Seite. In der Demo erhält jede der drei Feature-Karten ihren eigenen Tooltip-Text, der einmal im Panel geschrieben und bei jedem Hover serviert wird.

Wo Tooltips ihren Lebensunterhalt verdienen #

• 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.
• 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.

Video-Tutorial #

Bevorzugen, es live zu sehen? Dieses Video zeigt die Aktivierung der Erweiterung, das Schreiben des Tooltips und das Styling der Blase.

Häufig gestellte Fragen #

Einwickelnd #

Die Tooltip-Erweiterung für Elementor fügt allem, was Sie erstellen, eine kleine, stilvolle Hover-Note hinzu: Drehen Sie den Schalter auf der Registerkarte Erweitert um, schreiben Sie den Text, wählen Sie Platzierung und Animation aus und stylen Sie die Blase einmal. Sie liest sich wie ein Teil Ihres Designs, kein Browser übrig. Für weitere Upgrades für Fortgeschrittene-Tabs durchsuchen Sie die Master Addons Widgets und Erweiterungen, oder sehen Sie sich die an Glassmorphie-erweiterung Für einen weiteren One-Toggle-Effekt.