Zum Hauptinhalt springen

Verstehen der Layout- und Positionsoptionen für Tooltips

Erfahren Sie, wann eingebettete oder überlagerte Layouts und Ausrichtungen verwendet werden.

Verfasst von Beth-Ann Sher

Beim Erstellen eines Tooltips wählen Sie ein Element auf Ihrer Website aus. Intercom verwendet dann CSS-Selektoren, um die von Ihnen gewählten Elemente zu identifizieren.

Da keine zwei Websites gleich sind, haben wir eine Reihe von Layout-Funktionen hinzugefügt, die Ihnen helfen, die beste Erfahrung für Ihre Endnutzer zu bieten. So wirkt der Tooltip nativer in Ihrer Anwendung und stört nicht die von Ihnen gestaltete Benutzererfahrung.

Überlagertes vs. eingebettetes Layout

Bei der Wahl eines Layouts müssen Sie zunächst überlegen, wie der Tooltip in Ihre Webseite eingefügt wird.

Dies kann durch Auswahl einer der beiden Layout-Optionen erfolgen:

  • Überlagert - Überlagert den Tooltip über die vorhandenen Elemente auf der Seite.

  • Eingebettet - Wird inline positioniert und verschiebt Elemente auf der Seite, um Platz zu schaffen.

Tooltip-Ausrichtung

Die gewählte Ausrichtung bestimmt, wie der Tooltip relativ zu dem von Ihnen ausgewählten Element positioniert wird, was Ihnen mehr Kontrolle darüber gibt, wo der Tooltip erscheint.

Es gibt 3 Ausrichtungsoptionen zur Auswahl:

  • Text im Element - Richtet sich am Text aus, falls dieser im Element vorhanden ist.

  • Innerhalb des Elements - Richtet sich (standardmäßig) an der rechten Seite des Elements aus.

  • Neben dem Element - Richtet sich (standardmäßig) außerhalb des Elements auf der rechten Seite aus.

Verfeinern Sie die Ausrichtung weiter mit den Optionen, um die Tooltip-Ausrichtung nach links, rechts, oben, unten oder in die Mitte zu verschieben. Verwenden Sie diese Steuerungen, wenn Sie den Tooltip von den Standardpositionen verschieben möchten.

Versatz

Für die letzte Feinabstimmung ermöglichen Ihnen die Versatz-Steuerungen, den Tooltip nach links oder rechts, oben oder unten zu verschieben. Diese sind besonders nützlich, wenn Sie näher an das Element heran- oder weiter davon weg möchten, das Sie mit dem Tooltip hervorheben wollen.

Was tun, wenn der Tooltip nicht korrekt positioniert werden kann

Wenn Sie Schwierigkeiten haben, den Tooltip korrekt zu positionieren, gibt es einige Faktoren, die Sie berücksichtigen sollten:

  • Hat Ihr Produkt Elemente mit festen Breiten - Das von Ihnen ausgewählte Element könnte von Ihren Entwicklern feste Breiten zugewiesen bekommen haben. In diesem Fall wird ein eingebetteter Tooltip möglicherweise nicht wie erwartet dargestellt. Versuchen Sie, mit Ihrem Entwicklerteam das HTML und CSS der Webseite zu überprüfen.

  • Ihr Produkt verwendet dynamisch generierte Klassen - Die Darstellung kann im Tooltip-Builder korrekt erscheinen, aber nicht wie erwartet, wenn Sie in der Live-Umgebung testen oder eine Vorschau anzeigen. In diesem Fall gibt es oft dynamische Inhalte, die das Layout der Seite verändern und den Tooltip an eine unerwartete Position verschieben.

Versuchen Sie, diese Probleme zu beheben, indem Sie manuell den CSS-Selektor auswählen.

Fragen?

Wenn Sie weitere Fragen zum Bearbeiten eines Tooltips haben, chatten Sie einfach mit uns im Messenger und wir helfen Ihnen gerne weiter.

Hat dies deine Frage beantwortet?