Instrumentorum

Overview

Res cognoscendi cum usura tooltip plugin est:

• Tooltips innituntur 3 factionis bibliothecae Popper pro positione. Includere debetis popper.min.js ante bootstrap.js vel uti bootstrap.bundle.min.js/ bootstrap.bundle.jsquod continet Popper ut instrumenta ad operandum!
• Tooltips optet-in causis faciendis, ergo eas te ipsum initialize oportet .
• Instrumenta cum titulis zerum-longitudo numquam ostentantur.
• Specificare container: 'body'ad vitandas difficultates in pluribus componentibus (sicut coetus input coetus, globuli, etc).
• Instrumentorum occultorum in elementis felis non laborabit.
• Tooltips enim .disabledvel disabledelementum eget elementum in wrapper.
• Cum ex hyperlinks utitur qui plures lineas spatiantur, instrumenta media centra erunt. Utere white-space: nowrap;tuo <a>s ad vitandum hunc mores.
• Instrumenta celari debent antequam elementa eorum correspondentia a dom.
• Instrumenta possunt agere per elementum intra umbram dom.

Possedi omnia qua? Magna, videamus quomodo aliquibus exemplis operentur.

Exemplum: Admitte tooltips ubique

Uno modo ut omnia instrumenta in pagina initializent eas per data-bs-toggleattributum eligere:

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

Exempla

Volitant super nexus infra videre tooltips:

Super globulis infra volitant quattuor instrumenta directionum: summum, dextrum, fundum, et sinistrum. Directiones speculantur cum per Bootstrap in RTL.

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

Et cum consuetudine HTML additur:

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

Cum SVG:

Sass

Variabilium

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

Consuetudinem

Instrumentum plugin contentum et signum in demanda generat, et per default loca instrumenta post elementum felis suum.

Tooltip Trigger per 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

Signum requisitum pro instrumenti instrumenti dataattributum est tantum et titlein elementum HTML quod tooltip habere vis. Nota notae generatae instrumenti instrumenti magis simplex est, quamquam positione requirit (per default ad topplugin positam).

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

Debilitatum elementis

Elementa cum disabledattributo non sunt interactive, utentes significationes non possunt focus, tabernus, vel preme eas ut tooltip trigger (vel popover). Cum habemus, voles ex fascia instrumentum felis felis <div>vel <span>, bene utens cinematographico-focusabile factum 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>

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-bs-, ut in data-bs-animation="". Fac mutare casus genus optionis nominis e camelCase ad kebab-casu cum transeundo optiones per data attributa. Exempli gratia, loco data-bs-customClass="beautifier"uteris, uteris data-bs-custom-class="beautifier".

Munus cum usurapopperConfig

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

Methodi

ostende

Elementum demonstrat tooltip. RECENS redit ad instrumentum ante demonstratum (id est antequam shown.bs.tooltipevenit). Hoc habetur "manuale" excitato instrumenti instrumenti. Instrumenta cum titulis zerum-longitudo numquam ostentantur.

tooltip.show()

celare

Instrumentum elementum celat. Redit ad RECENS ante instrumentum absconditum (id est antequam hidden.bs.tooltipevenit). Hoc habetur "manuale" excitato instrumenti instrumenti.

tooltip.hide()

toggle

Toggles tooltip elementum est. RECENS redit ad instrumentum ante demonstratum vel absconditum (id est ante shown.bs.tooltipvel hidden.bs.tooltipeventum). Hoc habetur "manuale" excitato instrumenti instrumenti.

tooltip.toggle()

dispono

Coria et instrumentum elementi destruit (reposita removet data in elementum dom). Instrumenta delegationis utentium ( quae selectoroptione utente creantur ) singulariter destrui non possunt in elementis felis descendentibus.

tooltip.dispose()

da "

Instrumentum instrumentum elementi facultatem demonstrandi dat. Instrumenta per defaltam possunt.

tooltip.enable()

disable

Facultatem removet instrumentum ad ostensionem elementi. Instrumentum instrumentum tantum demonstrari poterit si re-paratur.

tooltip.disable()

toggleEnabled

Toggles facultatem instrumenti elementi exhibendi vel absconditi.

tooltip.toggleEnabled()

renovatio

Renovat locum tooltip elementi.

tooltip.update()

getInstance

Statica methodus quae te permittit ut instantia instrumenti instrumenti ad elementum dom consociata

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

getOrCreateInstance

Statica methodus quae te permittit ut instantia instrumenti instrumenti cum elemento DOM adiuncto accipias, vel novum efficias in casu non initialized

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

Events

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

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

tooltip.hide()