Source

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:

Enge Hosen der nächsten Stufe, keffiyeh , von denen hast du wahrscheinlich noch nie gehört. Photo Booth Beard Raw Denim Buchdruck vegane Umhängetasche stumptown. Farm-to-Table-Seitan, Mcsweeney's Fixie Sustainable Quinoa 8-Bit American Apparel haben einen Frottee-Richardson-Vinyl-Chabray. Bart Stumptown, Cardigans banh mi lomo Thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chabray. Ein wirklich ironischer Handwerker wie auch immer Keytar , Scenester Farm-to-Table Banksy Austin Twitter-Handle Freegan Cred Raw Denim Single-Origin-Kaffee viral.

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)
Überlauf autouscroll

Die Tooltip-Position versucht, sich automatisch zu ändern, wenn ein übergeordneter Container unsere hat overflow: autooder mag , behält aber dennoch die Positionierung der ursprünglichen Platzierung bei. Um das Problem zu lösen, setzen Sie die Option auf einen anderen Wert als den Standardwert , z. B. :overflow: scroll.table-responsiveboundary'scrollParent''window'

$('#example').tooltip({ boundary: 'window' })

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).

QuickInfos für Benutzer von Tastaturen und Hilfstechnologien verwenden

Sie sollten QuickInfos nur zu HTML-Elementen hinzufügen, die traditionell über die Tastatur fokussierbar und interaktiv sind (z. B. Links oder Formularsteuerelemente). Obwohl beliebige HTML-Elemente (z. B. <span>s) durch Hinzufügen des tabindex="0"Attributs fokussierbar gemacht werden können, fügt dies potenziell lästige und verwirrende Tabstopps bei nicht interaktiven Elementen für Tastaturbenutzer hinzu. Darüber hinaus kündigen die meisten Hilfstechnologien den Tooltip in dieser Situation derzeit nicht an.

Verlassen Sie sich außerdem nicht ausschließlich auf hoverden Auslöser für Ihre QuickInfo, da dies Ihre QuickInfos für Tastaturbenutzer unmöglich machen wird.

<!-- 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="".

Name Typ Standard Beschreibung
Animation boolesch Stimmt Wenden Sie einen CSS-Fade-Übergang auf die QuickInfo an
Container Zeichenfolge | Element | FALSCH FALSCH

Hängt den Tooltip an ein bestimmtes Element an. Beispiel: container: 'body'. Diese Option ist besonders nützlich, da sie es Ihnen ermöglicht, den Tooltip im Fluss des Dokuments in der Nähe des auslösenden Elements zu positionieren – wodurch verhindert wird, dass der Tooltip während einer Fenstergrößenänderung vom auslösenden Element wegschwebt.

Verzögerung Zahl | Objekt 0

Verzögerung beim Anzeigen und Ausblenden des Tooltips (ms) – gilt nicht für den manuellen Triggertyp

Wenn eine Nummer angegeben wird, wird die Verzögerung sowohl auf das Ausblenden als auch auf das Anzeigen angewendet

Objektstruktur ist:delay: { "show": 500, "hide": 100 }

html boolesch FALSCH

HTML im Tooltip zulassen.

Wenn wahr, werden HTML-Tags in den QuickInfos in der QuickInfo titlegerendert. Bei „false“ wird die Methode von jQuery textverwendet, um Inhalte in das DOM einzufügen.

Verwenden Sie Text, wenn Sie sich Sorgen über XSS-Angriffe machen.

Platzierung Zeichenfolge | Funktion 'oben'

So positionieren Sie den Tooltip - auto | Nach oben | unten | links | Rechts.
Wenn autoangegeben wird, wird der Tooltip dynamisch neu ausgerichtet.

Wenn eine Funktion verwendet wird, um die Platzierung zu bestimmen, wird sie mit dem Tooltip-DOM-Knoten als erstem Argument und dem auslösenden Element-DOM-Knoten als zweitem Argument aufgerufen. Der thisKontext wird auf die Tooltip-Instanz gesetzt.

Wähler Zeichenfolge | FALSCH FALSCH Wenn ein Selektor bereitgestellt wird, werden QuickInfo-Objekte an die angegebenen Ziele delegiert. In der Praxis wird dies verwendet, um dynamischen HTML-Inhalten das Hinzufügen von Popovern zu ermöglichen. Siehe dies und ein informatives Beispiel .
Schablone Schnur '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Basis-HTML, das beim Erstellen der QuickInfo verwendet werden soll.

Die Tooltips titlewerden in die .tooltip-inner.

.arrowwird zum Pfeil des Tooltips.

Das äußerste Wrapper-Element sollte die .tooltipKlasse und haben role="tooltip".

Titel Zeichenfolge | Element | Funktion ''

Standardtitelwert, wenn titledas Attribut nicht vorhanden ist.

Wenn eine Funktion angegeben wird, wird sie aufgerufen, wobei ihre thisReferenz auf das Element gesetzt wird, an das der Tooltip angehängt ist.

Abzug Schnur "Hover-Fokus"

Wie der Tooltip ausgelöst wird – klicken Sie auf | schweben | Fokus | Handbuch. Sie können mehrere Auslöser passieren; Trennen Sie sie mit einem Leerzeichen.

'manual'gibt an, dass der Tooltip programmgesteuert über die Methoden .tooltip('show'), .tooltip('hide')und ausgelöst wird; .tooltip('toggle')dieser Wert kann nicht mit anderen Triggern kombiniert werden.

'hover'allein führt zu Tooltips, die nicht über die Tastatur ausgelöst werden können, und sollten nur verwendet werden, wenn alternative Methoden zur Übermittlung derselben Informationen für Tastaturbenutzer vorhanden sind.

versetzt Zahl | Schnur 0 Versatz des Tooltips relativ zu seinem Ziel. Weitere Informationen finden Sie in der Offset -Dokumentation von Popper.js .
FallbackPlatzierung Zeichenfolge | Reihe 'umdrehen' Geben Sie an, welche Position Popper beim Fallback verwenden wird. Weitere Informationen finden Sie in der Verhaltensdokumentation von Popper.js
Grenze Zeichenfolge | Element 'scrollParent' Überlaufbeschränkungsgrenze der QuickInfo. Akzeptiert die Werte von 'viewport', 'window', 'scrollParent', oder eine HTMLElement-Referenz (nur JavaScript). Weitere Informationen finden Sie in der Datei preventOverflow von Popper.js .

Datenattribute für einzelne Tooltips

Optionen für einzelne Tooltips können alternativ, wie oben erläutert, durch die Verwendung von Datenattributen spezifiziert werden.

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang . Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet . Außerdem wird ein Methodenaufruf einer Übergangskomponente ignoriert .

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation.

$().tooltip(options)

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

.tooltip('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.

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

.tooltip('hide')

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.

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

.tooltip('toggle')

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.

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

.tooltip('dispose')

Versteckt und zerstört den Tooltip eines Elements. QuickInfos, die Delegierung verwenden (die mit der selectorOption erstellt werden ), können nicht einzeln für untergeordnete Auslöserelemente zerstört werden.

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

.tooltip('enable')

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

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

.tooltip('disable')

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

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

.tooltip('toggleEnabled')

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

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

.tooltip('update')

Aktualisiert die Position der QuickInfo eines Elements.

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

Veranstaltungen

Ereignistyp Beschreibung
show.bs.tooltip Dieses Ereignis wird sofort ausgelöst, wenn die showInstanzmethode aufgerufen wird.
angezeigt.bs.tooltip Dieses Ereignis wird ausgelöst, wenn der Tooltip für den Benutzer sichtbar gemacht wurde (wartet auf den Abschluss der CSS-Übergänge).
hide.bs.tooltip Dieses Ereignis wird sofort ausgelöst, wenn die hideInstanzmethode aufgerufen wurde.
versteckt.bs.tooltip Dieses Ereignis wird ausgelöst, wenn der Tooltip vor dem Benutzer ausgeblendet wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
eingefügt.bs.tooltip Dieses Ereignis wird nach dem show.bs.tooltipEreignis ausgelöst, wenn die QuickInfo-Vorlage zum DOM hinzugefügt wurde.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})