Elementor Tooltip-Erweiterung - Fügen Sie Tooltips zu allem hinzu
Tooltips ist eine Pro-Erweiterung Es fügt jedem Elementor-Widget, Container, Spalte und Abschnitt ein Tooltip-Panel hinzuWähle etwas aus, das sich bereits auf deiner Seite befindet, schreibe die Nachricht, wähle eine Platzierung und gestalte sie passend zu deiner Seite, wenn du stattdessen einen neuen Hinweis auf einen leeren Platz haben möchtest, benutze das Standalone Tooltip-widget, die mit dem kostenlosen Plugin geliefert wird.
Was Sie mit der Tooltips-Erweiterung tun können
Positionierung und interaktives Verhalten
Platzieren Sie die Blase oben, unten, links oder rechts eines beliebigen Elements. Lösen Sie den Mauszeiger aus oder klicken Sie. Fügen Sie Eingangsanimation (Blende, Skala), Dauer und Versteckverzögerung hinzu. Oder aktivieren Sie Follow Cursor, damit der Tooltip mit der Maus weiterläuft, was für Karten, Diagramme und Diagramme gut funktioniert.
- Pin-Tooltips an jeder Seite, so dass sie nie den Inhalt abdecken, den sie erklären.
- Folgen Cursor verwandelt Bilder und Diagramme in erkundbare, beschriftete Oberflächen.
- Animations- und Timing-Steuerelemente sorgen dafür, dass sich jeder Tooltip auf der Benutzeroberfläche nativ anfühlt.
Visuelle Anpassung
Ersetzen Sie Browser-Standardeinstellungen durch selbst entworfene Tooltips: Text- und Hintergrundfarben, Polsterung, Ränder, Randradius, Pfeilstil und -farbe, Kastenschatten und vollständige Typografiesteuerung.
- Genaue Markenfarben für Hintergrund, Text und Pfeil.
- Grenzen, Radius und Schatten, die zum Rest Ihres Designsystems passen.
- Schriftfamilie, Größe und Gewichtskontrolle für lesbare Mikrokopien.
Tooltips zu jedem Element, mit dynamischem Inhalt
Es funktioniert auf Schaltflächen, Symbolen, Bildern, Überschriften, Containern, Spalten, Abschnitten und allem, was Sie im Editor auswählen können. Das Textfeld mit Tooltip akzeptiert dynamische Elementor-Tags, sodass ein Hinweis Live-Daten wie einen Preis oder ein Postdatum eingeben kann.
- Schalten Sie die Erweiterung einmal ein und jedes Element erhält ein Tooltip-Panel Sie fügen nie ein separates Widget für jeden Hinweis hinzu.
- Jedes Element behält seinen eigenen Tooltip, so dass drei Karten hintereinander jeweils etwas anderes aussagen können.
- Dynamische Tags halten Hinweise aktuell, zum Beispiel Live-Produktdetails.
Erweiterung oder Element: Welches benötigen Sie?
Diese Seite (Tooltips-Erweiterung, Pro): der Inhalt existiert bereits und man möchte einen Hinweis daran anhängen, Es funktioniert auf jedem Widget, jeder Spalte, jedem Abschnitt oder Container.
Tooltip-Element (kostenlos): Sie benötigen einen neuen Hinweis auf der Seite und das Widget liefert einen eigenen Triggertext, ein eigenes Symbol oder ein eigenes Bild.
Häufige Anwendungsfälle
- Symbole und Schaltflächen: Erklären Sie vor dem Klick, was eine schlichte Icon-Taste tut.
- Bilder und Diagramme: Folgen Sie Cursor-Etiketten auf Karten, Grundrissen und technischen Zeichnungen.
- Überschriften und Begriffe: Jargon inline ohne Fußnoten definieren.
- Abschnitte: Beta - oder “neue” Abzeichen und Feature-Callout-Hinweise auf ganzen Blöcken.
- WooCommerce: Versand-, Lager- oder Variantennotizen, die an der Kaufschaltfläche angebracht sind.
So fügen Sie einem Elementor-Widget einen Tooltip hinzu
- Wählen Sie alles aus Klicken Sie auf ein Widget, eine Spalte, einen Container oder einen Abschnitt in Elementor und öffnen Sie dessen Registerkarte Erweitert, um den Abschnitt Tooltip zu finden.
- Schreiben und platzieren Geben Sie die Nachricht ein, dann setzen Sie Platzierung, Trigger (hover, click or custom), Animation, Dauer und Folgen Cursor, wenn Sie es brauchen.
- Style it Farben, Typografie, Polsterung, Radius, Pfeil und Schatten einstellen, dann Seite aktualisieren.
- Für eine Komplettlösung mit Screenshots lesen Sie So fügen Sie einen Tooltip in Elementor hinzu.
Häufig gestellte Fragen für Tooltips
Wie unterscheidet sich das vom Tooltip-Widget?
Beide haben Platzierungsvoreinstellungen, Hover - oder Click-Trigger, Animationen und Follow Cursor, Der Unterschied ist, wo der Tooltip lebt Die Erweiterung fügt einen an Inhalte an, die sich bereits auf Ihrer Seite befinden und Pro. Die Tooltip-element Ist ein kostenloses Standalone Widget mit eigenem Triggertext, Icon oder Bild Vorhandene Schaltfläche, Icon oder Abschnitt: die Erweiterung verwenden Leere Stelle, die einen Hinweis benötigt: das Element verwenden.
Wie verhalten sich Tooltips auf dem Handy?
Hover gibt es auf Touchscreens nicht, daher fungiert ein Tippen als Auslöser und ein zweiter Tipp an anderer Stelle weist die Blase ab. Halten Sie den Text des mobilen Tooltips kurz und bevorzugen Sie den Klickauslöser für kritische Hinweise.
Sind Tooltips gut für SEO und Barrierefreiheit?
Tooltip-Text ist im HTML enthalten, also crawlbar. Stellen Sie wichtige Informationen jedoch niemals nur in einen Tooltip ein, da einige Bildschirmlese- und Tastaturflüsse ihn möglicherweise übersehen. Verwenden Sie Tooltips für zusätzliche Hilfe und testen Sie mit Tools zur Barrierefreiheit.
Werden viele Tooltips meine Seite verlangsamen?
Jeder Tooltip fügt eine kleine Menge HTML und CSS hinzu Typische Verwendung, etwa 5 bis 10 pro Seite, hat keine spürbaren Auswirkungen Dutzende von schweren animierten Tooltips auf einer Seite können sich summieren, also halten Sie sie prägnant.
Wofür ist Follow Cursor gut?
Erkundbare Visuals: Karten, Produkt-Hotspots, Diagramme, technische Diagramme Die Blase folgt dem Zeiger, sodass jeder Bereich unter dem Cursor seine eigene Live-Erklärung erhält.
Kann ich dynamische Inhalte in einem Tooltip verwenden?
Ja. Kombinieren Sie es mit dynamischen Tags, um Live-Daten wie Preise, Namen oder Daten einzuschleusen, damit Hinweise ohne manuelle Änderungen auf dem neuesten Stand bleiben.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
