Namigi orodij

Pregled

Stvari, ki jih morate vedeti pri uporabi vtičnika orodnih namigov:

• Namigi orodij se za pozicioniranje zanašajo na knjižnico tretje osebe Popper . Morate vključiti popper.min.js pred bootstrap.js ali uporabiti bootstrap.bundle.min.js/ bootstrap.bundle.js, ki vsebuje Popper, da bodo namigi delovali!
• Namigi orodij so zaradi učinkovitosti izbirni, zato jih morate inicializirati sami .
• Namigi z naslovi ničelne dolžine niso nikoli prikazani.
• Določite container: 'body', da se izognete težavam z upodabljanjem v kompleksnejših komponentah (kot so naše vnosne skupine, skupine gumbov itd.).
• Sprožitev namigov orodij na skritih elementih ne bo delovala.
• Nasveti za .disabledali disabledelemente se morajo sprožiti na ovojnem elementu.
• Ko se sprožijo iz hiperpovezav, ki zajemajo več vrstic, bodo namigi orodij na sredini. Uporabite white-space: nowrap;na svojem <a>s, da se izognete temu vedenju.
• Namigi orodij morajo biti skriti, preden so njihovi ustrezni elementi odstranjeni iz DOM-a.
• Namigi orodij se lahko sprožijo zaradi elementa znotraj senčnega DOM-a.

Vse to razumeš? Super, poglejmo, kako delujejo z nekaj primeri.

Primer: povsod omogočite opise orodij

Eden od načinov inicializacije vseh namigov orodij na strani bi bil, da jih izberete po njihovem data-bs-toggleatributu:

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

Primeri

Premaknite miškin kazalec nad spodnje povezave, da si ogledate opise orodij:

Premaknite miškin kazalec nad spodnje gumbe, da vidite štiri smeri orodnih namigov: zgoraj, desno, spodaj in levo. Pri uporabi Bootstrap v RTL so navodila zrcaljena.

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

In z dodanim HTML-jem po meri:

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

Z SVG:

Sass

Spremenljivke

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

Uporaba

Vtičnik orodnih namigov ustvari vsebino in oznake na zahtevo ter privzeto postavi namige orodij za njihov sprožilni element.

Sproži opis orodja prek JavaScripta:

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

Zahtevana oznaka za opis orodja je le dataatribut in titlena elementu HTML, za katerega želite, da je opis orodja. Ustvarjena oznaka orodnega opisa je precej preprosta, čeprav zahteva položaj (privzeto nastavljen tops strani vtičnika).

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

Onemogočeni elementi

Elementi z disabledatributom niso interaktivni, kar pomeni, da jih uporabniki ne morejo izostriti, premakniti z miško ali klikniti, da bi sprožili opis orodja (ali pojavni pojav). Kot rešitev boste želeli sprožiti namig orodja iz ovoja <div>ali <span>, v idealnem primeru narejenega s tipkovnico, z uporabo 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>

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-bs-, kot v data-bs-animation="". Pri posredovanju možnosti prek podatkovnih atributov spremenite vrsto malega črke imena možnosti iz camelCase v kebab-case. Na primer, namesto uporabite data-bs-customClass="beautifier", uporabite data-bs-custom-class="beautifier".

Uporaba funkcije zpopperConfig

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

Metode

pokazati

Razkrije namig elementa. Vrne se klicatelju, preden se dejansko prikaže opis orodja (tj. preden shown.bs.tooltippride do dogodka). To velja za »ročno« proženje namiga orodja. Namigi z naslovi ničelne dolžine niso nikoli prikazani.

tooltip.show()

skriti

Skrije namig elementa. Vrne se klicatelju, preden je bil opis orodja dejansko skrit (tj. preden se hidden.bs.tooltipzgodi dogodek). To velja za »ročno« proženje namiga orodja.

tooltip.hide()

preklop

Preklopi opis orodja elementa. Vrne se klicatelju, preden je bil opis orodja dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.tooltipali ). hidden.bs.tooltipTo velja za »ročno« proženje namiga orodja.

tooltip.toggle()

odstraniti

Skrije in uniči opis orodja elementa (odstrani shranjene podatke o elementu DOM). Namigov orodij, ki uporabljajo delegiranje (ki so ustvarjeni z možnostjo selector) , ni mogoče posamično uničiti na podrejenih sprožilnih elementih.

tooltip.dispose()

omogočiti

Omogoči prikaz orodnega namig elementa. Namigi orodij so privzeto omogočeni.

tooltip.enable()

onemogočiti

Odstrani možnost prikaza namiga elementa. Namig orodja bo lahko prikazan samo, če bo znova omogočen.

tooltip.disable()

preklopiOmogočeno

Preklopi zmožnost prikaza ali skritja opisa orodja elementa.

tooltip.toggleEnabled()

nadgradnja

Posodobi položaj opisa orodja elementa.

tooltip.update()

getInstance

Statična metoda, ki vam omogoča, da dobite primerek opisa orodja, povezanega z elementom DOM

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

getOrCreateInstance

Statična metoda, ki vam omogoča, da dobite primerek orodnega opisa, povezanega z elementom DOM, ali ustvarite novega, če ni bil inicializiran

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

Dogodki

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

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

tooltip.hide()