Gereedskapwenke

Oorsig

Dinge om te weet wanneer jy die tooltip-inprop gebruik:

• Gereedskapwenke maak staat op die derdeparty-biblioteek Popper vir posisionering. Jy moet popper.min.js voor bootstrap.js insluit of bootstrap.bundle.min.js/ bootstrap.bundle.jswat Popper bevat gebruik sodat gereedskapwenke kan werk!
• Gereedskapwenke is intekening vir prestasieredes, so jy moet dit self inisialiseer .
• Gereedskapwenke met titels van geen lengte word nooit vertoon nie.
• Spesifiseer container: 'body'om te verhoed dat probleme in meer komplekse komponente weergegee word (soos ons invoergroepe, knoppiegroepe, ens.).
• Om gereedskapwenke op verborge elemente te aktiveer, sal nie werk nie.
• Gereedskapwenke vir .disabledof disabledelemente moet op 'n omhulelement geaktiveer word.
• Wanneer dit geaktiveer word vanaf hiperskakels wat oor verskeie lyne strek, sal gereedskapwenke gesentreer word. Gebruik white-space: nowrap;op jou <a>s om hierdie gedrag te vermy.
• Gereedskapwenke moet versteek word voordat hul ooreenstemmende elemente uit die DOM verwyder is.
• Gereedskapwenke kan geaktiveer word danksy 'n element binne 'n skadu-DOM.

Het jy dit alles? Wonderlik, kom ons kyk hoe hulle werk met 'n paar voorbeelde.

Voorbeeld: Aktiveer gereedskapwenke oral

Een manier om alle gereedskapwenke op 'n bladsy te inisialiseer, is om hulle volgens hul data-bs-togglekenmerk te kies:

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

Voorbeelde

Beweeg oor die skakels hieronder om nutswenke te sien:

Beweeg oor die knoppies hieronder om die vier gereedskapwenke-rigtings te sien: bo, regs, onder en links. Aanwysings word weerspieël wanneer Bootstrap in RTL gebruik word.

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

En met persoonlike HTML bygevoeg:

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

Met 'n SVG:

Sass

Veranderlikes

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

Gebruik

Die tooltip-inprop genereer inhoud en opmaak op aanvraag, en plaas by verstek gereedskapwenke na hul snellerelement.

Aktiveer die nutswenk via 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')
})

Opmerk

Die vereiste opmaak vir 'n nutswenk is slegs 'n datakenmerk en titleop die HTML-element wil jy 'n nutswenk hê. Die gegenereerde opmaak van 'n nutswenk is redelik eenvoudig, alhoewel dit 'n posisie vereis (by verstek gestel topdeur die inprop).

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

Gedeaktiveerde elemente

Elemente met die disabledkenmerk is nie interaktief nie, wat beteken dat gebruikers nie kan fokus, beweeg of daarop klik om 'n nutswenk (of popover) te aktiveer nie. As 'n oplossing, sal jy die nutswenk wil aktiveer vanaf 'n omhulsel <div>of <span>, ideaal gemaak sleutelbord-fokusbaar met 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>

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-bs-, soos in data-bs-animation="". Maak seker dat jy die kastipe van die opsienaam verander van camelCase na kebab-case wanneer die opsies deur data-kenmerke deurgegee word. Byvoorbeeld, in plaas van om te gebruik data-bs-customClass="beautifier", gebruik data-bs-custom-class="beautifier".

Die gebruik van funksie metpopperConfig

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

Metodes

Wys

Onthul 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys is (dws voor die shown.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die nutswenk. Gereedskapwenke met titels van geen lengte word nooit vertoon nie.

tooltip.show()

wegsteek

Versteek 'n element se nutswenk. Keer terug na die beller voordat die nutswenk eintlik versteek is (dws voor die hidden.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die nutswenk.

tooltip.hide()

wissel

Wissel 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys of versteek is (dws voordat die shown.bs.tooltipof hidden.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die nutswenk.

tooltip.toggle()

wegdoen

Versteek en vernietig 'n element se nutswenk (Verwyder gestoorde data op die DOM-element). Gereedskapwenke wat delegering gebruik (wat met die selectoropsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.

tooltip.dispose()

aktiveer

Gee 'n element se nutswenk die vermoë om gewys te word. Gereedskapwenke is by verstek geaktiveer.

tooltip.enable()

deaktiveer

Verwyder die vermoë om 'n element se nutswenk te wys. Die nutswenk sal slegs gewys kan word as dit weer geaktiveer is.

tooltip.disable()

toggleAktiveer

Wissel die vermoë vir 'n element se nutswenk om gewys of versteek te word.

tooltip.toggleEnabled()

Opdateer

Dateer die posisie van 'n element se nutswenk op.

tooltip.update()

getInstance

Statiese metode wat jou toelaat om die tooltip-instansie te kry wat met 'n DOM-element geassosieer word

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

getOrCreateInstance

Statiese metode wat jou toelaat om die tooltip-instansie te kry wat met 'n DOM-element geassosieer word, of 'n nuwe een te skep ingeval dit nie geïnisialiseer is nie

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

Gebeurtenisse

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

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

tooltip.hide()