Zurück zu Blog

Hinzufügen einfacher Tooltips in Webflow

Fügen Sie mit der Tippy.js-Bibliothek in Sekundenschnelle Tooltipps zu Ihrer Website hinzu

Überblick 📚.

Lernen Sie, wie Sie mit der tippy.js-Bibliothek schöne Tooltips zu Ihren Webflow-Projekten hinzufügen können.

Dies ist eine wesentlich skalierbarere, effektivere und leichtere Lösung als die Verwendung von Interaktionen zur Verwaltung Ihrer Tooltips.

Diese Lösung ist in einigen Formaten über Webflow-Community-Mitglieder verfügbar. Wenn Sie einen anderen Ansatz suchen, schauen Sie sich die Arbeit von Noah Raskinan


Um dies zu Ihrem Projekt hinzuzufügen, folgen Sie den einfachen Schritten und fügen Sie den benutzerdefinierten Code in Ihr Projekt oder Ihre Seiteneinstellungen ein.

{{ Template "gist" "text:Before </body> tag" "id:a14e3804072cb7e88a16b6d3b89b0ce8" }}

Anweisungen ✍️

1. Fügen Sie Ihrer Seite ein Element hinzu, über das die Benutzer den Mauszeiger bewegen und Tooltips aktivieren können.

Tippy funktioniert mit jedem Element und kann entweder Attribute oder das Skript zur Steuerung bestimmter Funktionen verwenden. Alles, was Sie brauchen, sind die in diesem Leitfaden enthaltenen Skripte und das Hinzufügen der Klasse "tippy" zu Ihren Elementen.

Das Skript enthält unsere Standardeinstellungen für Ihr tippy-Setup. Sie können diese bearbeiten oder benutzerdefinierte Attribute anwenden, um einzigartige Tooltips für verschiedene Elemente zu erhalten. Hier sind einige der beliebtesten Attribute, die mit Tippy verwendet werden, aber Sie können alle Funktionen in der Dokumentation nachlesen.


Attribute:

Inhalt:
data-tippy-content = "Fügen Sie Ihre Nachricht hinzu"

Platzierung:
data-tippy-placement = "top"

Animation:
data-tippy-animation = "scale"

Pfeil:
data-tippy-arrow = "true"

2. Fügen Sie die benutzerdefinierten Attribute zu Ihrem Element hinzu

Navigieren Sie zu den Einstellungen dieses Elements und fügen Sie die gewünschten benutzerdefinierten Attribute hinzu. Standardmäßig müssen Sie das Attribut hinzufügen:

data-tippy-content = "Message Here" hier können wir die Nachricht einfügen, die dem Nutzer beim Hovern angezeigt werden soll.

3. Fügen Sie die benutzerdefinierten Skripte und den Code ein.

Be sure to add the custom script into your Before </body> tag custom code area.

{{ Template "gist" "text:Before </body> tag" "id:a14e3804072cb7e88a16b6d3b89b0ce8" }}
4. Elementspezifische Tooltips hinzufügen

Überschreiben Sie die Standardeinstellungen, indem Sie Ihre eigenen Attribute zu jedem Element hinzufügen.

5. Veröffentlichen & Testen

Da diese Tooltips benutzerdefinierten Code verwenden, müssen Sie Ihre Seite zum Anzeigen und Testen veröffentlichen. Funktioniert etwas nicht? Vergewissern Sie sich, dass der Klassenname dem Element hinzugefügt wurde, und stellen Sie sicher, dass er genau mit dem Skript übereinstimmt.

ANDERE ANLEITUNGEN &AMP; LEKTIONEN

Steigern Sie Ihre Webflow-Site weiter.

Schließen Sie sich heute über 30.000
Creators an.

Tragen Sie sich in unsere Newsletter-Liste ein, um gelegentliche Updates, Produkte und Einblicke zu erhalten.

Danke schön! Ihre Einsendung ist eingegangen!
Hoppla! Beim Einreichen des Formulars ist etwas schiefgegangen.
Schließen Sie sich 30.000+ anderen Kreativen in unseren Gemeinschaften an.