Kurzinfos

Dokumentation und Beispiele zum Hinzufügen von benutzerdefinierten Bootstrap-Tooltips mit CSS und JavaScript unter Verwendung von CSS3 für Animationen und Datenattribute für die lokale Titelspeicherung.

Überblick

Wissenswertes zur Verwendung des Tooltip-Plugins:

• Tooltips stützen sich zur Positionierung auf die Drittanbieterbibliothek Popper.js . Sie müssen popper.min.js vor bootstrap.js einfügen oder bootstrap.bundle.min.js/ verwenden bootstrap.bundle.js, das Popper.js enthält, damit Tooltips funktionieren!
• Wenn Sie unser JavaScript aus der Quelle erstellenutil.js , ist .
• QuickInfos sind aus Leistungsgründen optional, Sie müssen sie also selbst initialisieren .
• Tooltips mit leeren Titeln werden nie angezeigt.
• Geben Sie container: 'body'an, um Renderprobleme in komplexeren Komponenten (wie unseren Eingabegruppen, Schaltflächengruppen usw.) zu vermeiden.
• Das Auslösen von QuickInfos auf ausgeblendeten Elementen funktioniert nicht.
• QuickInfos für .disabledoder disabled-Elemente müssen auf einem Wrapper-Element ausgelöst werden.
• Wenn sie von Hyperlinks ausgelöst werden, die sich über mehrere Zeilen erstrecken, werden QuickInfos zentriert. Verwenden Sie white-space: nowrap;auf Ihren <a>s, um dieses Verhalten zu vermeiden.
• QuickInfos müssen ausgeblendet werden, bevor die entsprechenden Elemente aus dem DOM entfernt wurden.

Hast du das alles? Großartig, mal sehen, wie sie mit einigen Beispielen funktionieren.

Beispiel: Tooltips überall aktivieren

Eine Möglichkeit, alle QuickInfos auf einer Seite zu initialisieren, besteht darin, sie anhand ihres data-toggleAttributs auszuwählen:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Beispiele

Bewegen Sie den Mauszeiger über die folgenden Links, um QuickInfos anzuzeigen:

Bewegen Sie den Mauszeiger über die Schaltflächen unten, um die vier QuickInfo-Richtungen anzuzeigen: oben, rechts, unten und links.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Und mit benutzerdefiniertem HTML hinzugefügt:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Verwendungszweck

Das Tooltip-Plug-in generiert Inhalte und Markups nach Bedarf und platziert QuickInfos standardmäßig nach ihrem Auslöserelement.

Lösen Sie den Tooltip über JavaScript aus:

$('#example').tooltip(options)

Markierung

Das erforderliche Markup für einen Tooltip ist nur ein dataAttribut und titleauf dem HTML-Element, das Sie haben möchten, ein Tooltip. Das generierte Markup eines Tooltips ist ziemlich einfach, erfordert jedoch eine Position (standardmäßig topvom Plugin festgelegt).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Deaktivierte Elemente

Elemente mit dem disabledAttribut sind nicht interaktiv, was bedeutet, dass Benutzer sie nicht fokussieren, mit der Maus bewegen oder darauf klicken können, um eine QuickInfo (oder ein Popover) auszulösen. Als Problemumgehung sollten Sie den Tooltip von einem Wrapper <div>oder auslösen <span>, der idealerweise mit der Tastatur fokussierbar gemacht wird tabindex="0", und das pointer-eventsauf dem deaktivierten Element überschreiben.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-animation="".

Methoden

$().tooltip(options)

Fügt einen Tooltip-Handler an eine Elementsammlung an.

.tooltip('show')

Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.

$('#element').tooltip('show')

.tooltip('hide')

Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip or hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

$('#element').tooltip('toggle')

.tooltip('dispose')

Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

$('#element').tooltip('dispose')

.tooltip('enable')

Gives an element’s tooltip the ability to be shown. Tooltips are enabled by default.

$('#element').tooltip('enable')

.tooltip('disable')

Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Toggles the ability for an element’s tooltip to be shown or hidden.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Updates the position of an element’s tooltip.

$('#element').tooltip('update')

Events

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})