Bootstrap Tooltips

BY admin
|
Werbung

In diesem Tutorial lernen Sie, wie man Tooltips mit Bootstrap erstellt.

Erstellen von Tooltips mit Bootstrap

Ein Tooltip ist ein kleines Popup, das erscheint, wenn der Benutzer den Mauszeiger über ein Element wie einen Link oder eine Schaltfläche bewegt, um einen Hinweis oder Informationen über das Element zu geben, über das der Mauszeiger bewegt wird.

Tooltips können für neue Besucher Ihrer Website sehr hilfreich sein, da sie es dem Benutzer ermöglichen, den Zweck von Icons und Links zu erkennen, wenn er den Mauszeiger darüber hält.

Schritt 1: Hinzufügen der Tooltip-Auszeichnung

Um einen Tooltip zu erstellen, müssen Sie das Attribut data-toggle="tooltip" zu einem Element hinzufügen. Tolltip-Text, der beim Hovern angezeigt wird, kann mit dem title-Attribut angegeben werden.

Hier ist das Standard-Markup für das Hinzufügen eines Tolltip zu einem Hyperlink.

<a href=“#“ data-toggle=“tooltip“ title=“Some text“>Hover over me</a>

In ähnlicher Weise können Sie Tooltips zu anderen Elementen wie Schaltflächen, Icons usw. hinzufügen.

Hinweis: Aus Performance-Gründen sind die Tooltip-Data-Apis opt-in, d.h. um Tooltips zu verwenden, muss man sie selbst mit der Methode tooltip() initialisieren.

Schritt 2: Auslösen der Tooltips

Tooltips können über JavaScript ausgelöst werden – rufen Sie einfach die tooltip() Bootstrap-Methode mit dem id, class oder einem beliebigen CSS-Selektor des Zielelements in Ihrem JavaScript-Code auf.

Sie können Tooltips entweder einzeln oder alle auf einmal initialisieren. Der folgende jQuery-Code initialisiert alle Tooltips auf einer Seite, indem er sie anhand ihres data-toggle-Attributs auswählt.

Beispiel

Probieren Sie diesen Code aus “ 

<script>$(document).ready(function(){ $('').tooltip(); });</script>

– Die Ausgabe des obigen Beispiels wird etwa so aussehen:

Einstellen der Richtungen von Tooltips

Sie können festlegen, dass Tooltips an der oberen, rechten, unteren und linken Seite eines Elements erscheinen.

Positionierung von Tooltips über Datenattribute

Das folgende Beispiel zeigt Ihnen, wie Sie die Richtung von Tooltips über Datenattribute festlegen können.

Positionierung von Tooltips über JavaScript

Das folgende Beispiel zeigt, wie man die Richtung von Tooltips über JavaScript einstellen kann.

Optionen

Es gibt bestimmte Optionen, die an die tooltip() Bootstrap Methode übergeben werden können, um die Funktionalität des Tooltip Plugins anzupassen.

Name Typ Standardwert Beschreibung
Animation Boolean True Anwenden eines CSS-Überblendungsübergangs auf den Tooltip.
html boolean false In den Tooltip HTML einfügen. Wenn false, wird die text()-Methode von jQuery verwendet, um Inhalte in das DOM einzufügen. Verwenden Sie Text, wenn Sie sich Sorgen über XSS-Angriffe machen.
placement string | function ‚top‘ Setzt die Position des Tooltips – top | bottom | left | right | auto. Wenn der Wert „auto“ angegeben wird, wird die QuickInfo dynamisch neu ausgerichtet.
selector string false Wenn ein Selektor angegeben wird, werden die QuickInfo-Objekte den angegebenen Zielen zugeordnet.
title string | function “ Setzt den Standardwert title, wenn das Attribut title nicht vorhanden ist.
trigger string ‚hover focus‘ Bestimmt, wie Tooltip ausgelöst wird – click | hover | focus | manual.
delay number | object 0

Zeit für das Ein- und Ausblenden des Tooltips (ms) – gilt nicht für den manuellen Triggertyp.

Wenn eine Zahl angegeben wird, wird die Verzögerung sowohl auf das Ausblenden als auch auf das Einblenden angewendet:
delay: { show: 500, hide: 100 }
container string | false false Hängt den Tooltip an ein bestimmtes Element an container: 'body'
template string

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Basis-HTML, das bei der Erstellung des Tooltips verwendet wird. Der Titel des Tooltips wird in das Element mit der Klasse .tooltip-inner eingefügt und das Element mit der Klasse .tooltip-arrow wird zum Pfeil des Tooltips.

Das äußerste Wrapper-Element sollte die Klasse .tooltip haben.
Ansichtsbereich String | Objekt { selector: 'body', padding: 0 } Hält die QuickInfo innerhalb der Grenzen dieses Elements. Beispiel: viewport: '#viewport' oder { selector: '#viewport', padding: 0 }
Offset Zahl | string 0 Offset des Tooltips relativ zu seinem Ziel.
fallbackPlacement String | array ‚flip‘ Ermöglicht es, die Position zu bestimmen, die Popper beim Fallback verwendet.
Grenze String | Element ’scrollParent‘ Überlaufbegrenzung des Tooltips. Akzeptiert die Werte von 'viewport', 'window', 'scrollParent' oder eine HTMLElement-Referenz (nur JavaScript).
sanitize boolean true Aktivieren oder deaktivieren Sie die Bereinigung. Wenn aktiviert, werden die Optionen ‚template‘ und ‚title‘ bereinigt.
whiteList object value Object, das erlaubte Attribute und Tags enthält.
sanitizeFn null | function null Ermöglicht die Angabe einer eigenen Sanitize-Funktion.

Sie können diese Optionen entweder durch die Verwendung von Datenattributen oder JavaScript festlegen. Um die Tooltip-Optionen über Datenattribute zu setzen, fügen Sie einfach den Namen der Option zusammen mit dem richtigen Wert an data- an, z. B. data-animation="false", data-placement="bottom" usw.

JavaScript ist jedoch der bessere Weg, um diese Optionen zu setzen, da es Ihnen die wiederholte Arbeit erspart. Siehe die Tooltip-Methode $().tooltip(options) im folgenden Abschnitt, um zu erfahren, wie man die Optionen für Tooltips mit JavaScript einstellt.

Methoden

Dies sind die Standard-Tooltip-Methoden von Bootstrap:

$().tooltip(options)

Diese Methode fügt den Tooltip-Handler an eine Gruppe von Elementen an. Sie ermöglicht es Ihnen auch, die Optionen für die Tooltips festzulegen, so dass Sie sie nach Ihren Bedürfnissen anpassen können.

Das folgende Beispiel fügt den angegebenen Text innerhalb der Tooltips ein, wenn der Wert des title-Attributs in den ausgewählten Elementen fehlt:

Das folgende Beispiel zeigt Ihnen, wie Sie den HTML-Inhalt innerhalb eines Tooltips platzieren:

Das folgende Beispiel zeigt Ihnen, wie Sie den Zeitpunkt des Ein- und Ausblendens des Tooltips mit der delay-Option des Tooltips über JavaScript steuern.

Das folgende Beispiel zeigt Ihnen, wie Sie Ihre eigene benutzerdefinierte Vorlage für die Bootstrap-Tooltips erstellen können, anstatt die Standardvorlage zu verwenden.

Das folgende Beispiel fügt den dynamisch generierten HTML-Code des Tooltips am Ende eines .wrapper-Elements anstelle des <body>-Elements ein.

Hinweis: Das Überschreiben des Standardwerts der Option container für die QuickInfo führt zu keinem sichtbaren Unterschied auf der Seite. Um das tatsächliche Ergebnis zu sehen, müssen Sie das resultierende DOM mit den Firebug- oder Developer-Tools inspizieren.

Auch andere Optionen für die Tooltips können Sie mit der Methode $().tooltip(options) einstellen. Schauen wir uns die anderen Methoden des Bootstrap Tooltip Plugins an.

.tooltip(’show‘)

Diese Methode zeigt den Tooltip eines Elements an.

Beispiel

Probieren Sie diesen Code aus “ 

<script>$(document).ready(function(){ $(".show-tooltip").click(function(){ $("#myTooltip").tooltip('show'); }); });</script>

.tooltip(‚hide‘)

Diese Methode blendet den Tooltip eines Elements aus.

Beispiel

Probiere diesen Code aus “ 

<script>$(document).ready(function(){ $(".hide-tooltip").click(function(){ $("#myTooltip").tooltip('hide'); }); });</script>

.tooltip(‚toggle‘)

Diese Methode schaltet den Tooltip eines Elements um.

Beispiel

Probiere diesen Code aus “ 

<script>$(document).ready(function(){ $(".toggle-tooltip").click(function(){ $("#myTooltip").tooltip('toggle'); }); });</script>

.tooltip(‚dispose‘)

Diese Methode blendet den Tooltip eines Elements aus und zerstört ihn.

.tooltip(‚enable‘)

Diese Methode gibt dem Tooltip eines Elements die Möglichkeit, angezeigt zu werden. Tooltips sind standardmäßig aktiviert.

Beispiel

Probieren Sie diesen Code aus “ 

<script>$(document).ready(function(){ $(".enable-tooltip").click(function(){ $("#myTooltip").tooltip('enable'); }); });</script>

.tooltip(‚disable‘)

Diese Methode entfernt die Möglichkeit, dass der Tooltip eines Elements angezeigt wird. Der Tooltip kann nur angezeigt werden, wenn er wieder aktiviert wird.

.tooltip(‚toggleEnabled‘)

Diese Methode schaltet die Fähigkeit des Tooltips eines Elements ein oder aus.

.tooltip(‚update‘)

Diese Methode aktualisiert die Position des Tooltips eines Elements.

Beispiel

Probieren Sie diesen Code aus “ 

<script>$(document).ready(function(){ $(".update-tooltip").click(function(){ $("#myTooltip").tooltip('update'); }); });</script>

Events

Die Tooltip-Klasse von Bootstrap enthält einige Events, um die Tooltip-Funktionalität zu nutzen.

Event Description
show.bs.tooltip Dieses Ereignis wird sofort ausgelöst, wenn die show-Instanzmethode aufgerufen wird.
shown.bs.tooltip Dieses Ereignis wird ausgelöst, wenn der Tooltip für den Benutzer sichtbar gemacht wurde. Es wartet, bis der CSS-Übergangsprozess vollständig abgeschlossen ist, bevor es ausgelöst wird.
hide.bs.tooltip Dieses Ereignis wird sofort ausgelöst, wenn die Instanzmethode hide aufgerufen wurde.
hidden.bs.tooltip Dieses Ereignis wird ausgelöst, wenn der Tooltip vor dem Benutzer verborgen wurde. Es wartet, bis der CSS-Übergangsprozess vollständig abgeschlossen ist, bevor es ausgelöst wird.
inserted.bs.tooltip Dieses Ereignis wird nach dem Ereignis show.bs.tooltip ausgelöst, wenn die Tooltip-Vorlage zum DOM hinzugefügt wurde.

Das folgende Beispiel zeigt eine Warnmeldung für den Benutzer an, wenn der Ausblendungsübergang der QuickInfo vollständig abgeschlossen ist.

Werbung