KI-Zusammenfassung
Möchten Sie Tooltips zu Ihrem Formular hinzufügen? Tooltips sind kleine Kästchen, die erscheinen, wenn Sie mit der Maus über einen Bereich auf Ihrer WordPress-Website fahren, und sie eignen sich hervorragend, um zusätzliche Informationen zu einem Feld hinzuzufügen, ohne es zu überladen.
In diesem Beitrag zeigen wir Ihnen, wie Sie Tooltips in WordPress hinzufügen.
In diesem Artikel
- Was ist ein Tooltip in WordPress?
- Ein WordPress-Tooltip ohne Plugin installieren
- Schritt 1. Erstellen Sie ein WordPress-Formular
- Schritt 2. Installieren Sie das Shortcodes Ultimate Plugin
- Schritt 3: Holen Sie sich Ihren Tooltip-Shortcode
- Schritt 4: Fügen Sie Ihren Tooltip zu Ihrem Formular hinzu
- Schritt 5: Passen Sie Ihren Tooltip an
- Schritt 5: Verwandeln Sie Ihren Tooltip in ein Symbol (optional)
- Abschließende Gedanken
Erstellen Sie jetzt Ihr WordPress-Formular
Was ist ein Tooltip in WordPress?
Tooltips sind Hinweise, Glossarbegriffe oder Nachrichten, die erscheinen, wenn Ihr Besucher mit der Maus über ein Element auf Ihrer WordPress-Website fährt oder es auf Mobilgeräten berührt. Und in Ihren WordPress-Formularen können Tooltips verwendet werden, um zusätzliche Informationen zu einem bestimmten Feld hinzuzufügen.
Sehen Sie sich zum Beispiel den folgenden Screenshot an.
WPForms ermöglicht es Ihnen, im Formular-Builder ganz einfach eine Beschreibung für jedes Feld hinzuzufügen. Im Gegensatz zu einer typischen Feld-Beschreibung sind Tooltips standardmäßig ausgeblendet. Sie erscheinen nur, wenn Ihr Benutzer mehr Details zu einem bestimmten Feld erfahren möchte, indem er mit der Maus über die Feld-Beschreibung fährt.
Das Hinzufügen eines Tooltips ist eine gute Idee, wenn Sie mehr Details zu einem bestimmten Feld angeben möchten, ohne unnötige Ablenkungen in Ihrem Formular zu erzeugen.
Nachdem Sie nun wissen, was ein Tooltip ist, lesen Sie weiter, um zu erfahren, wie Sie sie zu Ihrer Website hinzufügen.
Ein WordPress-Tooltip ohne Plugin installieren
Ja, es ist möglich, einen WordPress-Tooltip ohne Plugin zu installieren. Wenn Sie jedoch kein Tooltip-Plugin verwenden möchten, um einfach einen Tooltip zu Ihrer WordPress-Website hinzuzufügen, müssen Sie ein fortgeschrittener Benutzer sein und HTML oder jQuery verwenden (oder einen Entwickler beauftragen).
Glücklicherweise können Sie Zeit und Geld sparen, indem Sie ein Tooltip-Plugin verwenden. Für WPForms-Benutzer empfehlen wir das kostenlose Shortcodes Ultimate Plugin.
Shortcodes Ultimate ist einfach zu bedienen und funktioniert hervorragend mit den beliebtesten und besten WordPress-Themes.
Dieses äußerst hilfreiche und kostenlose WordPress-Plugin bietet Ihnen über 50 Shortcodes, mit denen Sie Ihrer Website ganz einfach verschiedene Funktionen hinzufügen können, einschließlich des Tooltip-Shortcodes. Als Nächstes zeigen wir Ihnen genau, wie Sie dieses WordPress-Tooltip-Plugin hinzufügen.
So fügen Sie Tooltips in WordPress hinzu
Werfen wir einen Blick auf die Schritt-für-Schritt-Anleitung, wie man Tooltips in WordPress hinzufügt.
Schritt 1. Erstellen Sie ein WordPress-Formular
Das erste, was Sie tun müssen, ist WPForms installieren und aktivieren auf Ihrer Website. Wenn Sie Hilfe benötigen, lesen Sie diese Anleitung zum Installieren eines WordPress-Plugins.
Dann müssen Sie ein einfaches Formular in WordPress erstellen.
Gute Arbeit beim Erstellen Ihres Formulars. Wir kommen in einem späteren Schritt darauf zurück.
Schritt 2. Installieren Sie das Shortcodes Ultimate Plugin
Klicken Sie als Nächstes hier, um zu WordPress zu gehen und das kostenlose Shortcodes Ultimate Plugin herunterzuladen.
Oder wenn Sie sich bereits in Ihrem WordPress-Dashboard befinden, klicken Sie auf Plugins » Neues Hinzufügen, suchen Sie nach Shortcodes Ultimate und klicken Sie auf Jetzt installieren.
Sobald das Plugin aktiviert ist, können Sie es verwenden.
Schritt 3: Holen Sie sich Ihren Tooltip-Shortcode
Suchen Sie nun das Shortcodes Ultimate Plugin auf der linken Seite Ihres WordPress-Dashboards und klicken Sie auf Verfügbare Shortcodes. Scrollen Sie auf dieser Seite nach unten und wählen Sie die Schaltfläche Tooltip.
Heben Sie auf der nächsten Seite den Shortcode hervor und kopieren Sie ihn:
Schritt 4: Fügen Sie Ihren Tooltip zu Ihrem Formular hinzu
Nachdem Sie nun Ihren Tooltip-Shortcode haben, ist es an der Zeit, ihn zu Ihrem einfachen Kontaktformular hinzuzufügen.
Gehen Sie zurück zu Ihrem Formular, indem Sie auf WPForms » Alle Formulare klicken und dann unter dem Formular, zu dem Sie Ihren Tooltip hinzufügen möchten, Bearbeiten auswählen.
Sobald Sie sich im Formular befinden, klicken Sie auf das Feld, zu dem Sie Ihren Tooltip hinzufügen möchten, und fügen Sie Ihren Tooltip-Shortcode in das Beschreibungsfeld ein.
Sobald Sie Ihr Formular speichern und es im Frontend anzeigen, wird der Tooltip nun angezeigt:
Schritt 5: Passen Sie Ihren Tooltip an
Sie können den Code auch ändern, um Ihren eigenen Text anzuzeigen. Hier ist ein Beispiel mit den Änderungen in Fettdruck:
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="This is the content area which will be shown in the Tooltip bubble after the user hovers over it!" behavior="hover" close="no" class=""]This is the text that will be always be displayed and will show the Tooltip content when hovered over![/su_tooltip]
Sie können auch eine Reihe verschiedener Optionen in Ihren Tooltip-Einstellungen ändern, die Sie finden, indem Sie zum Ende der Seite Shortcodes » Verfügbare Shortcodes scrollen, wie zum Beispiel:
- Stil + Farben
- Position
- Größe
- Verhalten
- Und mehr
Der nächste Schritt ist optional, aber er wird Ihren Tooltip noch individueller aussehen lassen und Ihre Formulare noch sauberer und ablenkungsfreier halten.
Schritt 5: Verwandeln Sie Ihren Tooltip in ein Symbol (optional)
Wenn Sie nicht ausdrücklich angeben und die Leute einladen, über Ihren Tooltip in Ihrem Tooltip-Shortcode zu schweben, erkennen Ihre Besucher möglicherweise nicht einmal, dass zusätzliche Inhalte darauf warten, in diesem Tooltip angezeigt zu werden! Eine großartige Möglichkeit, sicherzustellen, dass Ihre Leser über den Tooltip schweben, ist, ihn anstelle von nur Text zu einem Symbol zu machen.
Zum Beispiel fügen viele Leute ein „i“-Informationssymbol hinzu und wenn der Benutzer über dieses Symbol schwebt, wird der Tooltip angezeigt. Wie schick ist das denn?
Laden Sie dazu zuerst das kostenlose Better Font Awesome Plugin herunter und aktivieren Sie es. Wenn Sie direkt zu diesem Teil des Beitrags gesprungen sind, finden Sie hier einen Link zu Anleitung zur Installation eines WordPress-Plugins, falls Sie ihn benötigen.
Sobald das Plugin aktiviert ist, haben Sie Zugriff auf Tausende von kostenlosen Symbolen, die Sie mit einem einfachen Shortcode überall auf Ihrer WordPress-Website verwenden können. Lassen Sie uns nun den Shortcode des Info-Symbols zu unserem Tooltip hinzufügen.
Wir werden den Shortcode eines Plugins in den Shortcode eines anderen Plugins einfügen. Aber keine Sorge, beide werden trotzdem funktionieren!
Gehen Sie zurück zum Beschreibungsfeld Ihres Formulars, das Ihren Tooltip enthält, und ersetzen Sie einfach den angezeigten Text in Ihrem Tooltip-Shortcode durch diesen Shortcode:
[icon name="info"]
Der Textbereich, den Sie durch den obigen Shortcode ersetzen sollten, ist unten hervorgehoben:
Und so sollte der Code aussehen, nachdem Sie den Symbol-Shortcode hinzugefügt haben:
Alternativ können Sie auch einfach den folgenden Shortcode in Ihr Beschreibungsfeld kopieren und einfügen und ihn nach Ihren Wünschen anpassen.
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""][icon name="info"][/su_tooltip]
Speichern Sie als Nächstes Ihr Formular und überprüfen Sie es im Frontend, um Ihr Tooltip-Symbol zu sehen.
Großartige Arbeit! Wenn Sie jetzt noch weiter ins Detail gehen und das Tooltip-Symbol über dem Feld neben dem Label platzieren möchten, lesen Sie unsere ausführliche Anleitung zum Hinzufügen von Symbolen zu WordPress-Formularen.
Abschließende Gedanken
Das ist alles! Sie wissen jetzt, wie Sie Tooltips in WordPress hinzufügen.
Wenn Sie das Aussehen der Schaltflächen Ihrer Formulare ändern möchten, lesen Sie Anleitung zum Anpassen von Schaltflächenstilen mit CSS. Oder wenn Sie möchten, sehen Sie sich unsere Anleitung an, wie Sie WPForms mit CSS Hero gestalten (keine Codierung erforderlich).
Worauf wartest du noch? Starte noch heute mit dem besten WordPress-Formular-Plugin .
Wenn Ihnen dieser Artikel gefällt, dann folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials.
Ist es möglich, mehrere Tooltips mit unterschiedlichen Nachrichten hinzuzufügen?
Danke
Hallo!
Sicher, Sie können verschiedene Tooltips für verschiedene Felder erstellen, aber ein Feld kann nur einen Tooltip haben, da nur ein Tooltip angezeigt werden kann, wenn Sie mit der Maus darüber fahren.
Ich hoffe, das ist verständlich.
Einen schönen Tag noch 🙂
Wie kann man einem Icon oder Bild auf WordPress einen Tooltip hinzufügen?
Hallo Joshu!
Sie können einfach ein Bild- oder Icon-HTML-Tag mit dem Tooltip-Shortcode gemäß den Anweisungen in diesem Tutorial umschließen.
Ich hoffe, das hilft.
Einen schönen Tag noch 🙂
Hallo, danke für den Tipp.
Ich denke, das Formular würde ordentlicher aussehen, wenn das Tooltip-Icon neben dem Feld-Label positioniert wäre, anstatt ganz unten bei jedem Feld, so wie Sie es in Ihren Formulareinstellungen mit dem Fragezeichen-Icon-Tooltip haben. Wenn Sie es so gemacht haben, stimmen Sie wahrscheinlich auch zu, dass es besser ist. Wie erreichen wir einen ähnlichen Effekt?
Hallo Chris!
Sie können versuchen, den Tooltip-Shortcode in das Label-Feld einzufügen. Ich habe es persönlich nicht getestet, aber Sie können es gerne versuchen.
Ich hoffe, das hilft!
Einen schönen Tag noch 🙂
Es funktioniert, aber dann kommt der gesamte Code und die Beschreibung des Tooltips in Ihrer E-Mail durch und kann schwer zu lesen sein
Hallo Gareth.
In diesem Fall können Sie versuchen, die Smart Tags der Felder in den Benachrichtigungseinstellungen anstelle des {all_fields}-Tags zu verwenden.
Und falls es hilft, haben wir ein tolles Tutorial darüber, wie man Smart Tags in der Benachrichtigungs-E-Mail verwendet.
Wenn Sie Smart Tags verwenden, wird nicht automatisch das Feld-Label hinzugefügt, sondern nur sein Wert, sodass Sie die Labels manuell hinzufügen müssen.
Ich hoffe, das hilft.
Einen schönen Tag noch 🙂
Hallo, ich möchte ein Tooltip-Icon nach dem Label hinzufügen, aber wenn ich den [tooltip shortcode] in diesen Bereich einfüge, wird er nur als einfacher Text erkannt. Gibt es eine Problemumgehung?
Hallo Sina – Derzeit unterstützt das Label-Feld keine Shortcodes, nur das Description-Feld unterstützt Shortcodes. Wenn Sie es im Label-Feld benötigen, kann unser Support-Team möglicherweise mit benutzerdefiniertem Code helfen. Wenn Sie ein zahlender Nutzer sind, können Sie hier ein Support-Ticket erstellen.
Lass dir einen schönen Tag 🙂
Hallo…
Könnte ich das für Spaltentitel in WooCommerce verwenden?
Danke.
Hallo Octavio – Ich entschuldige mich, aber wir unterstützen keine Integration mit WooCommerce, hauptsächlich weil sie stark in ihre eigenen Formularsysteme integriert sind.
Wenn Sie möchten, dass Formulare innerhalb von WooCommerce funktionieren, empfehle ich Ihnen, sich direkt an das Woo-Team zu wenden, um sicherzustellen, dass Sie eine Option finden, die ordnungsgemäß in ihr System integriert ist.
Danke 🙂
Hallo,
Ich versuche, die Tooltips zu meiner Website hinzuzufügen, aber es funktioniert nicht. Die Shortcodes Ultimate haben keine verfügbaren Shortcodes, es sei denn, ich suche in ihrer Dokumentation. Könnte das die Ursache sein?
Hallo – Kann ich die Farbe und Größe des Icon-Tooltips ändern? Welchen Code benötige ich dafür?
Hallo Emma,
Gute Frage! Bitte beachten Sie diesen Leitfaden von Shortcode Ultimate, um den Text zu formatieren.
Ich hoffe, das hilft! 🙂
Wie kann ich einen Tooltip anzeigen lassen, wenn der Benutzer ein Feld nicht ausgefüllt hat? Ich weiß, dass es diese Meldung bereits gibt, aber sie ist ziemlich klein und viele Leute sind verwirrt, wenn sie das Formular ausfüllen. Idealerweise würde ich es irgendwie aufblitzen lassen wollen.
Hallo Myur – Obwohl wir derzeit nicht die Möglichkeit haben, die Meldung im Tooltip anzuzeigen, können Sie, wenn Sie möchten, die Schriftgröße der Validierungsmeldung mit folgendem CSS erhöhen:
div.wpforms-container-full .wpforms-form em.wpforms-error { font-size: 16px !important; /* Bitte ändern Sie die Werte nach Ihren Wünschen */ }Falls es hilft, können Sie sich hier unsere Dokumentation ansehen, um benutzerdefiniertes CSS hinzuzufügen.
Sie können auch eine Pflichtfeld-Meldung im Feld-Platzhalter anzeigen lassen, wie in diesem Screenshot gezeigt.