Kurzinfos

Überblick

Wissenswertes zur Verwendung des Tooltip-Plugins:

• Tooltips stützen sich zur Positionierung auf die Drittanbieter-Bibliothek Popper . Sie müssen popper.min.js vor einfügen bootstrap.jsoder eine verwenden, bootstrap.bundle.min.jsdie Popper enthält.
• 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.

Beispiele

Tooltips aktivieren

Wie oben erwähnt, müssen Sie QuickInfos initialisieren, bevor sie verwendet werden können. Eine Möglichkeit, alle QuickInfos auf einer Seite zu initialisieren, besteht darin, sie anhand ihres data-bs-toggleAttributs auszuwählen, etwa so:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Tooltips zu Links

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Benutzerdefinierte QuickInfos

Sie können das Erscheinungsbild von QuickInfos mithilfe von CSS-Variablen anpassen . Wir legen eine benutzerdefinierte Klasse mit fest data-bs-custom-class="custom-tooltip", um unser benutzerdefiniertes Erscheinungsbild zu erweitern, und verwenden sie, um eine lokale CSS-Variable zu überschreiben.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Richtungen

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Mit einem SVG:

CSS

Variablen

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden QuickInfos jetzt lokale CSS-Variablen .tooltipfür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

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

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Optionen

Da Optionen über Datenattribute oder JavaScript übergeben werden können, können Sie einen Optionsnamen data-bs-wie in anhängen data-bs-animation="{value}". Stellen Sie sicher, dass Sie den Falltyp des Optionsnamens von " camelCase " in " kebab -case " ändern, wenn Sie die Optionen über Datenattribute übergeben. Verwenden Sie beispielsweise data-bs-custom-class="beautifier"anstelle von data-bs-customClass="beautifier".

Ab Bootstrap 5.2.0 unterstützen alle Komponenten ein experimentelles reserviertes Datenattribut, das eine data-bs-configeinfache Komponentenkonfiguration als JSON-String enthalten kann. Wenn ein Element über data-bs-config='{"delay":0, "title":123}'und data-bs-title="456"-Attribute verfügt, ist der endgültige titleWert 456und die separaten Datenattribute überschreiben die auf angegebenen Werte data-bs-config. Darüber hinaus können vorhandene Datenattribute JSON-Werte wie data-bs-delay='{"show":0,"hide":150}'.

Verwenden der Funktion mitpopperConfig

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

Methoden

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Veranstaltungen

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()