Kurzinfos

Überblick

Wissenswertes zur Verwendung des Tooltip-Plugins:

• Tooltips stützen sich zur Positionierung auf die Drittanbieterbibliothek Popper . Sie müssen popper.min.js vor bootstrap.js einfügen oder bootstrap.bundle.min.js/ verwenden bootstrap.bundle.js, das Popper enthält, damit Tooltips funktionieren!
• 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.
• Tooltips können dank eines Elements in einem Shadow-DOM ausgelöst werden.

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-bs-toggleAttributs auszuwählen:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

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. Wegbeschreibungen werden bei Verwendung von Bootstrap in RTL gespiegelt.

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

Und mit benutzerdefiniertem HTML hinzugefügt:

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

Mit einem SVG:

Sass

Variablen

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

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-bs-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="tooltip-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>, idealerweise mit Tastatur-fokussierbar tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" 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-bs-, wie in data-bs-animation="". Stellen Sie sicher, dass Sie den Falltyp des Optionsnamens von camelCase in kebab-case ändern, wenn Sie die Optionen über Datenattribute übergeben. data-bs-customClass="beautifier"Verwenden Sie beispielsweise anstelle von data-bs-custom-class="beautifier".

Verwenden der Funktion mitpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Methoden

Show

Zeigt den Tooltip eines Elements an. Kehrt zum Anrufer zurück, bevor der Tooltip tatsächlich angezeigt wurde (dh bevor das shown.bs.tooltipEreignis eintritt). Dies gilt als „manuelles“ Auslösen des Tooltips. Tooltips mit leeren Titeln werden nie angezeigt.

tooltip.show()

ausblenden

Blendet den Tooltip eines Elements aus. Gibt den Aufrufer zurück, bevor der Tooltip tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.tooltipEreignis eintritt). Dies gilt als „manuelles“ Auslösen des Tooltips.

tooltip.hide()

Umschalten

Schaltet den Tooltip eines Elements um. Kehrt zum Aufrufer zurück, bevor der Tooltip tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das shown.bs.tooltipoder hidden.bs.tooltip-Ereignis eintritt). Dies gilt als „manuelles“ Auslösen des Tooltips.

tooltip.toggle()

entsorgen

Verbirgt und zerstört den Tooltip eines Elements (entfernt gespeicherte Daten auf dem DOM-Element). QuickInfos, die Delegierung verwenden (die mit der selectorOption erstellt werden ), können nicht einzeln für untergeordnete Auslöserelemente zerstört werden.

tooltip.dispose()

ermöglichen

Gibt dem Tooltip eines Elements die Möglichkeit, angezeigt zu werden. QuickInfos sind standardmäßig aktiviert.

tooltip.enable()

deaktivieren

Entfernt die Möglichkeit, den Tooltip eines Elements anzuzeigen. Der Tooltip kann nur angezeigt werden, wenn er wieder aktiviert wird.

tooltip.disable()

toggleEnabled

Schaltet die Möglichkeit um, den Tooltip eines Elements ein- oder auszublenden.

tooltip.toggleEnabled()

aktualisieren

Aktualisiert die Position der QuickInfo eines Elements.

tooltip.update()

bekomme Instanz

Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Tooltip-Instanz abrufen können

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Tooltip-Instanz abrufen oder eine neue erstellen können, falls sie nicht initialisiert wurde

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Veranstaltungen

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()