Opisi alata

Pregled

Stvari koje treba znati kada koristite dodatak s opisom alata:

• Opisi se za pozicioniranje oslanjaju na biblioteku treće strane Popper . Morate uključiti popper.min.js prije bootstrap.js ili koristiti bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper kako bi opisi alata radili!
• Opisi alata su opt-in zbog performansi, tako da ih morate sami pokrenuti .
• Opisi s naslovima nulte duljine nikad se ne prikazuju.
• Navedite container: 'body'kako biste izbjegli probleme s generiranjem u složenijim komponentama (poput naših ulaznih grupa, grupa gumba itd.).
• Pokretanje opisa alata na skrivenim elementima neće raditi.
• Opisi za elemente .disabledili disabledmoraju se pokrenuti na elementu omotača.
• Kada se pokreću iz hiperveza koje se protežu kroz više redaka, opisi alata bit će centrirani. Koristite white-space: nowrap;na svom <a>s kako biste izbjegli ovakvo ponašanje.
• Opisi alata moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.
• Opisi alata mogu se pokrenuti zahvaljujući elementu unutar DOM-a u sjeni.

Jeste li sve to shvatili? Sjajno, pogledajmo kako rade na nekim primjerima.

Primjer: Omogućite opise posvuda

Jedan od načina da inicijalizirate sve opise 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č iznad donjih veza da biste vidjeli savjete:

Zadržite pokazivač miša iznad gumba u nastavku da biste vidjeli četiri smjera opisa alata: gore, desno, dolje i lijevo. Upute 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 s dodanim prilagođenim HTML-om:

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

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

Korištenje

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

Pokreni 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 samo je dataatribut, a titlena HTML elementu želite imati opis alata. Generirano označavanje opisa alata je prilično jednostavno, iako zahtijeva poziciju (prema zadanim postavkama, postavljena topod strane dodatka).

<!-- 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 s disabledatributom nisu interaktivni, što znači da ih korisnici ne mogu fokusirati, lebdjeti pokazivačem ili kliknuti kako bi pokrenuli opis alata (ili skočni prozor). Kao zaobilazno rješenje, htjet ćete pokrenuti opis alata iz omotača <div>ili <span>, idealno napravljenog za fokusiranje na tipkovnici, pomoću 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>

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-bs-, kao u data-bs-animation="". Obavezno promijenite vrstu slučaja naziva opcije iz camelCase u kebab-case kada prosljeđujete opcije putem atributa podataka. Na primjer, umjesto da koristite 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

pokazati

Otkriva opis elementa. Vraća se pozivatelju prije nego što se alatni opis stvarno prikaže (tj. prije nego što se shown.bs.tooltipdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem opisa alata. Opisi s naslovima nulte duljine nikad se ne prikazuju.

tooltip.show()

sakriti

Skriva opis elementa. Vraća se pozivatelju 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()

prebaciti

Prebacuje opis elementa. Vraća se pozivatelju prije nego što se alatni opis stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.tooltipili ). hidden.bs.tooltipOvo se smatra "ručnim" pokretanjem opisa alata.

tooltip.toggle()

raspolagati

Skriva i uništava opis elementa (uklanja pohranjene podatke na DOM elementu). Opisi alata koji koriste delegiranje (koji se stvaraju pomoću opcije selector) ne mogu se pojedinačno uništiti na elementima okidača potomaka.

tooltip.dispose()

omogućiti

Daje mogućnost prikazivanja opisa elementa. Opisi su prema zadanim postavkama omogućeni.

tooltip.enable()

onemogućiti

Uklanja mogućnost prikazivanja opisa elementa. Opis alata moći će se prikazati samo ako je ponovno omogućen.

tooltip.disable()

prebaciOmogućeno

Isključuje mogućnost prikazivanja ili skrivanja opisa elementa.

tooltip.toggleEnabled()

Ažuriraj

Ažurira položaj opisa elementa.

tooltip.update()

getInstance

Statička metoda koja vam omogućuje dobivanje instance opisa alata povezane s 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ćuje dobivanje instance opisa alata povezane s DOM elementom ili stvaranje novog u slučaju da nije inicijaliziran

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