Alati

Pregled

Stvari koje trebate znati kada koristite dodatak za opis alata:

• Alati se oslanjaju na Popper biblioteku treće strane za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.js ili koristiti bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper da bi opisi radili!
• Alati su uključeni iz razloga performansi, tako da ih morate sami inicijalizirati .
• Alati sa naslovima nulte dužine se nikada ne prikazuju.
• Navedite container: 'body'kako biste izbjegli probleme s prikazivanjem u složenijim komponentama (kao što su naše grupe za unos, grupe dugmadi, itd.).
• Aktiviranje opisa alata na skrivenim elementima neće raditi.
• Oznake za .disabledili disabledelemente moraju se pokrenuti na elementu omotača.
• Kada se aktiviraju od hiperveza koje se protežu na više redova, opisi alata će biti centrirani. Koristite white-space: nowrap;na vašem <a>s da biste izbjegli ovo ponašanje.
• Alati moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.
• Alati se mogu pokrenuti zahvaljujući elementu unutar DOM-a u sjeni.

Imaš sve to? Sjajno, da vidimo kako rade na nekim primjerima.

Primjer: Omogućite opise svuda

Jedan od načina da se inicijaliziraju svi opisi alata na stranici bio bi da ih odaberete prema njihovom data-bs-toggleatributu:

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

Primjeri

Zadržite pokazivač miša preko linkova ispod da vidite opise alata:

Zadržite pokazivač iznad dugmadi ispod da vidite četiri smjera opisa alata: gore, desno, dolje i lijevo. Uputstva se preslikavaju kada koristite Bootstrap u RTL-u.

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

I sa dodatkom prilagođenog HTML-a:

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

Sa SVG:

Sass

Varijable

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

Upotreba

Dodatak za opis alata generira sadržaj i oznake na zahtjev, a prema zadanim postavkama postavlja opise alata nakon njihovog elementa okidača.

Aktivirajte opis alata putem 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

Potrebna oznaka za opis alata je samo dataatribut i titlena HTML elementu želite da imate opis alata. Generirana oznaka opisa alata je prilično jednostavna, iako zahtijeva poziciju (podrazumevano, postavljena na topdodatak).

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

Onemogućeni elementi

Elementi sa disabledatributom nisu interaktivni, što znači da korisnici ne mogu da se fokusiraju, lebde ili kliknu na njih da bi pokrenuli opis alata (ili skočni prozor). Kao zaobilazno rešenje, poželećete da pokrenete tooltip iz omotača <div>ili <span>, idealno napravljenog za fokusiranje na tastaturi koristeći 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

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-bs-, kao u data-bs-animation="". Obavezno promijenite tip slučaja naziva opcije iz camelCase u kebab-case kada prenosite opcije preko atributa podataka. Na primjer, umjesto korištenja data-bs-customClass="beautifier", koristite data-bs-custom-class="beautifier".

Korištenje funkcije sapopperConfig

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

Metode

show

Otkriva opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo prikazan (tj. prije nego što se shown.bs.tooltipdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata. Alati sa naslovima nulte dužine se nikada ne prikazuju.

tooltip.show()

sakriti

Sakriva opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo skriven (tj. prije nego što se hidden.bs.tooltipdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata.

tooltip.hide()

preklopiti

Prebacuje opis elementa. Vraća se pozivaocu prije nego što je opis alata zapravo prikazan ili skriven (tj. prije nego što se dogodi događaj shown.bs.tooltipili ). hidden.bs.tooltipOvo se smatra "ručnim" pokretanjem opisa alata.

tooltip.toggle()

dispose

Sakriva i uništava opis elementa (uklanja pohranjene podatke na DOM elementu). Oznake alata koje koriste delegiranje (koje su kreirane pomoću opcije selector) ne mogu se pojedinačno uništiti na elementima okidača potomaka.

tooltip.dispose()

omogućiti

Daje mogućnost prikaza alata elementa. Objašnjenja su podrazumevano omogućena.

tooltip.enable()

onemogućiti

Uklanja mogućnost prikaza alata za element. Alat će se moći prikazati samo ako je ponovo omogućen.

tooltip.disable()

toggleEnabled

Uključuje mogućnost prikaza ili sakrivanja opisa elementa.

tooltip.toggleEnabled()

ažurirati

Ažurira poziciju opisa elementa.

tooltip.update()

getInstance

Statička metoda koja vam omogućava da dobijete instancu opisa alata koja je povezana sa DOM elementom

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

getOrCreateInstance

Statička metoda koja vam omogućava da dobijete instancu opisa alata pridruženu DOM elementu ili kreirate novu u slučaju da nije inicijalizirana

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

Događaji

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

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

tooltip.hide()