Tooltips

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.

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:

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)

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

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

Benotzt Funktioun matpopperConfig

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

Methoden

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 en neien erstellen am Fall datt et net initialiséiert gouf

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

Evenementer

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

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

tooltip.hide()