TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich einen Tooltip in der Weebly-Site hinzu?

1

Weebly bietet nicht nur die Möglichkeit, Ihre Website in wenigen Minuten zu erstellen, sondern bietet auch zahlreiche Anpassungsmöglichkeiten, um beliebige zusätzliche Funktionen hinzuzufügen. Der Hauptgrund für den Erfolg von Weebly ist, dass kostenlose Benutzer den CSS- und HTML-Quellcode bearbeiten können. Wir haben bereits viele Tipps und Tricks sowie Widgets geschrieben, um Ihre Weebly-Site professioneller zu machen. Und in diesem Artikel werden wir unsere Widget-Reihe mit dem Tooltip-Widget fortsetzen.

Wie füge ich einen Tooltip in der Weebly-Site hinzu?

Tooltip ist ein Popup, das angezeigt wird, wenn die Maus über einen bestimmten Begriff oder ein Hilfesymbol bewegt wird. Auf einem mobilen Gerät sind das Erscheinen und Verschwinden von Tooltips Touch-Ereignisse oder können vollständig deaktiviert werden. Tooltips können auf viele nützliche Weisen verwendet werden:

  • Fügen Sie eine Abkürzung, Synonyme und Akronyme hinzu.
  • Präsentieren Sie eines Ihrer Produkte und verknüpfen Sie den QuickInfo-Begriff mit einer Produktseite.
  • Platzieren Sie eine Anzeige oder Affiliate-Links im Tooltip.
  • Zugehöriges Bild zum verlinkten Begriff anzeigen.
  • Platzieren Sie ein übersetztes Wort in einer anderen Sprache.
  • Geben Sie weitere Informationen zum Begriff an.

Tooltip ist eine der Funktionen, die die meisten von Ihnen in Ihre Weebly-Site einfügen wollten, um zusätzliche Informationen zu bestimmten Inhalten bereitzustellen. Es gibt viele Möglichkeiten, Ihren Inhalten Tooltips hinzuzufügen:

  • Verwenden des HTML-Titel-Tags.
  • Einfaches CSS verwenden.
  • Verwenden von erweitertem CSS.

In diesem Artikel erklären wir, wie Sie mit einfachem HTML- und CSS-Code Tooltips zur Weebly-Site hinzufügen. Es ist auch möglich, Tooltips mithilfe von Skripten hinzuzufügen, die in diesem Tutorial nicht behandelt werden.

Hinzufügen von Tooltips mit HTML-Titel-Tag

Die einfachste Möglichkeit, einem bestimmten Begriff in Ihrem Inhalt eine QuickInfo hinzuzufügen, ist die Verwendung des Title-Tags. Die Box des Tooltips basiert auf dem Standardstil des Browsers und Sie müssen dafür kein CSS hinzufügen. Unten sehen Sie ein Beispiel für das Hinzufügen einer QuickInfo mit dem Title-Tag. Bewegen Sie die Maus über den markierten Inhalt, um die QuickInfo anzuzeigen.

Bewege deine Maus hierher

Verwenden Sie in Ihrem Weebly-Editor das Element "Embed Code", um den Inhalt zusammen mit dem Title-Tag hinzuzufügen, um eine QuickInfo einzufügen. Unten sehen Sie ein Beispiel für die Verwendung des Title-Tags im Span-Element:

This is a simple tooltip and <span title="Tooltip with Title tag">move your mouse over here </span>to see it in action.

Anpassen der Tooltip-Box mit CSS

Die obige Methode ist sehr einfach und nicht attraktiv genug. Sie können ein benutzerdefiniertes Tooltip-Feld mit CSS hinzufügen, um sicherzustellen, dass es attraktiver aussieht.

Bewegen Sie die Maus darüber, um diesen Tooltip mit benutzerdefiniertem CSS-Code anzuzeigen

Der HTML-Code für den obigen Tooltip lautet wie folgt:

<p class="demo" data-tool-tip="Tooltip with custom CSS">Move your mouse over to see this tooltip with custom CSS code</p>

Und das CSS ist wie folgt:

<style> .demo, .demo p { margin: 4em 0; text-align: center; } [data-tool-tip] { position: relative; z-index: 2; cursor: pointer; } [data-tool-tip]:before, [data-tool-tip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } [data-tool-tip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tool-tip); text-align: center; font-size: 14px; line-height: 1.2; } [data-tool-tip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [data-tool-tip]:hover:before, [data-tool-tip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } </style>

Tooltips mit erweitertem CSS

Es ist nicht immer erforderlich, einem bestimmten Begriff eine QuickInfo hinzuzufügen. Meistens können Sie ein zusätzliches Hilfefeld (normalerweise ein Fragezeichen-Symbol) erstellen, um weitere Erklärungen zu geben. Dies erfordert die Verwendung von erweitertem CSS, um die Tooltip- Box anzupassen. Hier stellen wir drei Möglichkeiten zur Verfügung, um eine solche QuickInfo mit einfachem Text, HTML-Inhalt und einem Bild zu erstellen.

Hinzufügen von Tooltips mit einfachem Text

Unten ist ein einfacher Tooltip, der beim Bewegen der Maus angezeigt wird und verschwindet, wenn die Maus herausbewegt wird. Diese enthält nur einen Text und die Box wird mit dem CSS-Code angepasst.

Tooltip mit HTML-Inhalten

Was ist, wenn Sie Links oder HTML-Inhalte in die QuickInfo einfügen möchten? Schauen Sie sich die folgende Demo an und Sie können beliebige HTML-Tags wie Link, Fett usw. in den Tooltip einfügen.

Bild in einem Tooltip

Der dritte Fall besteht darin, ein Bild in den Tooltip einzufügen und die folgende Demo zu sehen, die ein Bild in der Tooltip-Box zeigt.

Das CSS für alle oben genannten drei Tooltips ist wie folgt:

<style> /* content box */ #tool_tip{ background-color: rgba(128, 128, 128, 0.07); border-radius: 4px; padding: 40px 40px 10px 30px; max-width: 600px; position: relative; margin: 0 auto; /* font-size: 18px; - use only if required /* line-height: 28px; - use only if required */ } /* Tooltip */ .help-tip{ position: absolute; top: 18px; right: 18px; text-align: center; background-color: #4F798E; border-radius: 50%; width: 24px; height: 24px; line-height: 26px; cursor: default; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip p{ display: none; text-align: left; background-color: #1E2021; padding: 20px; width: 300px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; /* Change the font size inside tooltip */ line-height: 1.4; } .help-tip p:before{ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#1E2021; right:10px; top:-12px; } .help-tip p:after{ width:100%; height:40px; content:''; position: absolute; top:-40px; left:0; } @-webkit-keyframes fadeIn { 0% { opacity:0; transform: scale(0.6); } 100% { opacity:100%; transform: scale(1); } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:100%; } } /* Adjust tooltip size on mobile devices */ @media screen and (max-width: 480px) { .help-tip p{ width: 200px; } } </style>

HTML-Code alle drei Tooltips sind unten:

<!-- HTML Code for Tooltip --> <!-- Text Tooltip--> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip appears on mouse hovering.</p> </div> <p>This is a simple tooltip with just text display on hovering. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with HTML Content --> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip with <b>HTML tags!</b> inside. <a href="https://www.webnots.com/">Here is a link!</a> You can insert any <i>HTML tag!</i></p> </div> <p>This tooltip has HTML tags inside. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with Image inside --> <div id="tool_tip"> <div class="help-tip"> <p>This tooltip has a picture too! < /br>< /br></p><p><img data-src="https://img.webnots.com/2015/06/Weebly-Site-Building.png" width="300" /></p> </div> <p>Also include a showcasing image inside the tooltip. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div>

Sie können sowohl CSS- als auch HTML- Inhalte, die für diese Demo verwendet werden, kopieren / einfügen und nach Ihren Bedürfnissen anpassen. Ersetzen Sie den Link und die Bild-URL durch Ihre eigene.

Hinzufügen von CSS und HTML in der Weebly-Site

Es gibt zwei Möglichkeiten, CSS in Weebly hinzuzufügen :

  • Fügen Sie es in „main.less” hinzu, um die Stile auf Ihrer gesamten Website anzuwenden.
  • Fügen Sie es im Abschnitt " Header Code " einer bestimmten Seite hinzu, damit das CSS nur für diese Seite wirksam wird.

Wie füge ich einen Tooltip in der Weebly-Site hinzu?

Kopfzeilencode in Seite hinzufügen

Hinzufügen von benutzerdefiniertem HTML

Der HTML-Teil des Tooltips muss in Ihrem Inhaltsbereich platziert werden, wo Sie einen Tooltip mit dem Element " Code einbetten " einfügen möchten .

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen