Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
in English

Tooltips

Dokumentatioun a Beispiller fir personaliséiert Bootstrap Tooltips mat CSS a JavaScript ze addéieren mat CSS3 fir Animatiounen an Data-bs-Attributer fir lokal Titellagerung.

Iwwersiicht

Saachen ze wëssen wann Dir den Tooltip Plugin benotzt:

  • Tooltips vertrauen op der Drëtt Partei Bibliothéik Popper fir positionéieren. Dir musst Popper.min.js virum bootstrap.js enthalen oder benotzen bootstrap.bundle.min.js/ bootstrap.bundle.jsdéi Popper enthält fir datt Tooltipps funktionnéieren!
  • Tooltips sinn opt-in aus Leeschtungsgrënn, also musst Dir se selwer initialiséieren .
  • Tooltips mat Null-Längt Titelen ginn ni ugewisen.
  • Spezifizéieren container: 'body'fir Rendering Probleemer a méi komplexe Komponenten ze vermeiden (wéi eis Inputgruppen, Knäppchengruppen, etc.).
  • Ausléiser Tooltips op verstoppte Elementer funktionnéieren net.
  • Tooltips fir .disabledoder disabledElementer muss op engem wrapper Element ausgeléist ginn.
  • Wann aus Hyperlinks ausgeléist gëtt, déi méi Zeilen spanen, ginn Tooltips zentréiert. Benotzt white-space: nowrap;op Är <a>s dëst Verhalen ze vermeiden.
  • Tooltips musse verstoppt ginn ier hir entspriechend Elementer aus der DOM geläscht ginn.
  • Tooltips kënnen ausgeléist ginn duerch en Element an engem Schied DOM.
Par défaut benotzt dës Komponent den agebauten Inhalt Sanitizer, deen all HTML Elementer ausstreift déi net explizit erlaabt sinn. Kuckt de Sanitizer Sektioun an eiser JavaScript Dokumentatioun fir méi Detailer.
Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro of. Kuckt d' Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .

Huet dat alles? Super, loosst eis kucken wéi se mat e puer Beispiller funktionnéieren.

Beispill: Aktivéiert Tooltips iwwerall

Ee Wee fir all Tooltipps op enger Säit ze initialiséieren wier se duerch hiren data-bs-toggleAttribut ze wielen:

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

Beispiller

Hover iwwer d'Links hei drënner fir Tooltipps ze gesinn:

Placeholder Text fir e puer Inline Links mat Tooltips ze demonstréieren. Dëst ass elo just Filler, kee Killer. Inhalt hei gesat just fir d'Präsenz vum richtegen Text ze mimikéieren . An dat alles just fir Iech eng Iddi ze ginn wéi Tooltips ausgesinn wann se an real-Welt Situatiounen benotzt ginn. Also hoffentlech hutt Dir elo gesinn wéi dës Tooltipps iwwer Linken an der Praxis funktionéiere kënnen, wann Dir se op Ärem eegene Site oder Projet benotzt.

Hover iwwer d'Knäppercher hei drënner fir déi véier Tooltips Richtungen ze gesinn: uewen, riets, ënnen a lénks. D'Richtunge gi gespigelt wann Dir Bootstrap an RTL benotzt.

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

A mat personaliséierten HTML dobäigesat:

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

Mat engem 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;

Benotzung

Den Tooltip Plugin generéiert Inhalt a Markup op Ufro, a setzt als Standard Tooltip no hirem Ausléiserelement.

Ausléiser den Tooltip iwwer JavaScript:

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

Tooltip Positioun probéiert automatesch z'änneren wann en Elterendeel Container huet overflow: autooder overflow: scrollwéi eis .table-responsive, awer hält ëmmer d'originell Plazéierungspositioun. Fir dëst ze léisen, setzt d' boundaryOptioun (fir de Flip-Modifier deen d' popperConfigOptioun benotzt) op all HTMLElement fir de Standardwäert ze iwwerschreiden, 'clippingParents', wéi document.body:

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

Markup

Déi erfuerderlech Markup fir e Tooltip ass nëmmen en dataAttribut an titleam HTML Element wëllt Dir e Tooltip hunn. De generéierte Markup vun engem Tooltip ass zimmlech einfach, awer et erfuerdert eng Positioun (par défaut, topvum Plugin gesat).

Maacht Tooltips fir Tastatur an Hëllefstechnologie Benotzer ze schaffen

Dir sollt nëmmen Tooltipps un HTML Elementer addéieren déi traditionell Tastatur fokusséierbar an interaktiv sinn (wéi Linken oder Form Kontrollen). Och wann arbiträr HTML Elementer (wéi <span>s) fokusséierbar gemaach kënne ginn andeems d' tabindex="0"Attribut bäigefüügt gëtt, wäert dëst potenziell lästeg a konfus Tabstoppen op net-interaktiven Elementer fir Tastaturbenotzer addéieren, an déi meescht Assistenztechnologien annoncéieren de Moment net den Tooltip an dëser Situatioun. Zousätzlech, vertrau net eleng op hoverden Ausléiser fir Ären Tooltip, well dëst wäert Är Tooltipps onméiglech maachen fir Tastatur Benotzer auszeléisen.

<!-- 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>

Behënnert Elementer

Elementer mat dem disabledAttribut sinn net interaktiv, dat heescht d'Benotzer kënnen net fokusséieren, hoveren oder klicken fir en Tooltip (oder Popover) auszeléisen. Als Léisung wëllt Dir den Tooltip aus engem Wrapper ausléisen <div>oder <span>, Idealfall gemaach Keyboard-fokusséierbar mat 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>

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-bs-, wéi an data-bs-animation="". Vergewëssert Iech de Falltyp vun der Optiounsnumm vun CamelCase op Kebab-Case z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill, amplaz ze benotzen data-bs-customClass="beautifier", benotzt data-bs-custom-class="beautifier".

Bedenkt datt aus Sécherheetsgrënn d' sanitize, sanitizeFn, an d' allowListOptiounen net mat Datenattributer geliwwert kënne ginn.
Numm Typ Default Beschreiwung
animation boolesch true Fëllt en CSS Fade Iwwergank op den Tooltip un
container streng | Element | falsch false

Fügt den Tooltip un e spezifescht Element un. Beispill container: 'body':. Dës Optioun ass besonnesch nëtzlech well et Iech erlaabt den Tooltip am Flux vum Dokument no beim Ausléiserelement ze positionéieren - wat verhënnert datt den Tooltip vum Ausléiserelement wärend enger Fënstergréisst schwëmmt.

delay Zuel | Objet 0

Verspéidung vun der Tooltip (ms) ze weisen an ze verstoppen - gëllt net fir manuell Ausléisertyp

Wann eng Zuel geliwwert gëtt, gëtt Verspéidung fir béid verstoppen / weisen applizéiert

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

html boolesch false

Erlaabt HTML am Tooltip.

Wann et richteg ass, ginn HTML-Tags an den Tooltip am Tooltip titlerendered. Wann falsch, gëtt innerTextd'Eegeschafte benotzt fir Inhalt an d'DOM ze setzen.

Benotzt Text wann Dir Iech Suergen iwwer XSS Attacken hutt.

placement streng | Funktioun 'top'

Wéi positionéiert de Tooltip - Auto | erop | ënnen | lénks | riets.
Wann autospezifizéiert ass, wäert et den Tooltip dynamesch nei orientéieren.

Wann eng Funktioun benotzt gëtt fir d'Placement ze bestëmmen, gëtt se mam Tooltip DOM Node als éischt Argument an dem Ausléiserelement DOM Node als zweet genannt. De thisKontext gëtt op d'Tooltip Instanz gesat.

selector streng | falsch false Wann e Selektor zur Verfügung gestallt gëtt, ginn Tooltip-Objeten op déi spezifizéiert Ziler delegéiert. An der Praxis gëtt dëst benotzt fir Tooltipps och op dynamesch dobäigesate DOM Elementer ( jQuery.onËnnerstëtzung) anzesetzen. Kuckt dëst an en informativt Beispill .
template String '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Baséiert HTML fir ze benotzen wann Dir den Tooltip erstellt.

D'Tooltip titlegëtt an de .tooltip-inner.

.tooltip-arrowwäert de Pfeil vum Tooltip ginn.

Dat äusserst Wrapperelement soll d' .tooltipKlass an role="tooltip".

title streng | Element | Funktioun ''

Standard Titelwäert wann titleAttribut net präsent ass.

Wann eng Funktioun uginn ass, gëtt se mat senger thisReferenz op d'Element genannt, op deem den Tooltip befestegt ass.

trigger String 'hover focus'

Wéi Tooltip ausgeléist gëtt - klickt | huel | konzentréieren | manuell. Dir kënnt verschidde Ausléiser passéieren; trennt se mat engem Raum.

'manual'weist datt den Tooltip programmatesch iwwer d' .show(), .hide()a .toggle()Methoden ausgeléist gëtt; dëse Wäert kann net mat all aner Ausléiser kombinéiert ginn.

'hover'eleng wäert zu Tooltipps resultéieren, déi net iwwer d'Tastatur ausgeléist kënne ginn, a sollten nëmme benotzt ginn wann alternativ Methoden fir déiselwecht Informatioun fir Tastaturbenotzer präsent sinn.

fallbackPlacements Array ['top', 'right', 'bottom', 'left'] Definéiert Fallbackplacementer andeems Dir eng Lëscht vu Placementer an der Array ubitt (an der Preferenzuerdnung). Fir méi Informatioun, kuckt op dem Popper seng Verhalensdokumenter
boundary streng | element 'clippingParents' Iwwerschwemmungsgrenze vum Tooltip (gëlt nëmme fir Popper's preventOverflow-Modifier). Par défaut ass et 'clippingParents'a kann eng HTMLElement Referenz akzeptéieren (nëmmen iwwer JavaScript). Fir méi Informatioun kuckt op Popper's detectOverflow docs .
customClass streng | Funktioun ''

Füügt Klassen un den Tooltip wann et gewise gëtt. Bedenkt datt dës Klassen zousätzlech zu all Klassen, déi an der Schabloun uginn sinn, bäigefüügt ginn. Fir méi Klassen ze addéieren, trennt se mat Plazen 'class-1 class-2':.

Dir kënnt och eng Funktioun weiderginn, déi eng eenzeg String mat zousätzlech Klassennimm zréckginn soll.

sanitize boolesch true Aktivéiert oder deaktivéiert d'Sanéierung. Wann aktivéiert 'template'an 'title'Optiounen wäert sanitized. Kuckt de Sanitizer Sektioun an eiser JavaScript Dokumentatioun .
allowList Objet Default Wäert Objet deen erlaabt Attributer an Tags enthält
sanitizeFn null | Funktioun null Hei kënnt Dir Är eege Sanitärfunktioun ubidden. Dëst kann nëtzlech sinn wann Dir léiwer eng speziell Bibliothéik benotze fir Sanéierung ze maachen.
offset array | streng | Funktioun [0, 0]

Offset vum Tooltip relativ zu sengem Zil. Dir kënnt eng String an Datenattributer mat komma getrennte Wäerter passéieren wéi:data-bs-offset="10,20"

Wann eng Funktioun benotzt gëtt fir d'Offset ze bestëmmen, gëtt se mat engem Objet genannt deen d'Popper Placement enthält, d'Referenz a Popper Rects als säin éischten Argument. Den Ausléiserelement DOM Node gëtt als zweet Argument weidergeleet. D'Funktioun muss eng Array mat zwou Zuelen zréckginn :.[skidding, distance]

Fir méi Informatioun kuckt op dem Popper seng Offset Docs .

popperConfig null | Objet | Funktioun null

Fir d'Standard Popper Configuratioun vum Bootstrap z'änneren, kuckt d' Popper Konfiguratioun .

Wann eng Funktioun benotzt gëtt fir d'Popper Konfiguratioun ze kreéieren, gëtt se mat engem Objet genannt deen d'Standard Popper Konfiguratioun vum Bootstrap enthält. Et hëlleft Iech de Standard mat Ärer eegener Konfiguratioun ze benotzen an ze fusionéieren. D'Funktioun muss e Configuratiounsobjekt fir Popper zréckginn.

Daten Attributer fir eenzel Tooltips

Optiounen fir eenzel Tooltips kënnen alternativ duerch d'Benotzung vun Datenattributer spezifizéiert ginn, wéi uewen erkläert.

Benotzt Funktioun matpopperConfig

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

Methoden

Asynchron Methoden an Iwwergäng

All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

weisen

Entdeckt den Tooltip vun engem Element. Gitt zréck op den Uruffer ier den Tooltip tatsächlech gewisen gouf (dh ier d' shown.bs.tooltipEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Tooltip ugesinn. Tooltips mat Null-Längt Titelen ginn ni ugewisen.

tooltip.show()

verstoppen

Verstoppt den Tooltip vun engem Element. Gitt zréck op den Uruffer ier den Tooltip tatsächlech verstoppt gouf (dh ier d' hidden.bs.tooltipEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Tooltip ugesinn.

tooltip.hide()

wiesselen

Wiesselt den Tooltip vun engem Element. Gitt zréck op den Uruffer ier den Tooltip tatsächlech gewisen oder verstoppt goufshown.bs.tooltip ( dh ier den hidden.bs.tooltipEvent geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Tooltip ugesinn.

tooltip.toggle()

entsuergen

Verstoppt an zerstéiert den Tooltip vun engem Element (läscht gespäichert Daten am DOM-Element). Tooltipps déi Delegatioun benotzen (déi mat der selectorOptioun erstallt ginn ) kënnen net individuell op Descendant Trigger Elementer zerstéiert ginn.

tooltip.dispose()

aktivéieren

Gëtt dem Tooltip vun engem Element d'Méiglechkeet ze weisen. Tooltips sinn als Standard aktivéiert.

tooltip.enable()

auszeschalten

Entfernt d'Fäegkeet fir den Tooltip vun engem Element ze weisen. Den Tooltip kann nëmme gewise ginn wann et nei ageschalt ass.

tooltip.disable()

toggleEnabled

Wiesselt d'Fäegkeet fir den Tooltip vun engem Element ze weisen oder ze verstoppen.

tooltip.toggleEnabled()

update

Aktualiséiert d'Positioun vum Tooltip vun engem Element.

tooltip.update()

getInstanz

Statesch Method déi Iech erlaabt d'Tooltip Instanz mat engem DOM Element assoziéiert ze kréien

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

getOrCreateInstance

Statesch Method déi Iech erlaabt d'Tooltip Instanz mat engem DOM Element assoziéiert ze kréien, oder eng nei ze kreéieren am Fall wou se net initialiséiert gouf

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

Evenementer

Event Typ Beschreiwung
show.bs.tooltip Dëst Event brennt direkt wann d' showInstanzmethod genannt gëtt.
shown.bs.tooltip Dëst Evenement gëtt ofgeléist wann den Tooltip fir de Benotzer siichtbar gemaach gouf (waart bis CSS Iwwergäng fäerdeg sinn).
hide.bs.tooltip Dëst Evenement gëtt direkt gebrannt wann d' hideInstanzmethod genannt gouf.
hidden.bs.tooltip Dëst Evenement gëtt ofgeléist wann den Tooltip fäerdeg ass vum Benotzer verstoppt ze ginn (waart op CSS Iwwergäng fir fäerdeg ze sinn).
inserted.bs.tooltip Dëst Evenement gëtt nom show.bs.tooltipEvent ofgeschaaft wann d'Tooltip Schabloun un d'DOM bäigefüügt gouf.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()