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.jsili koristiti onaj bootstrap.bundle.min.jskoji sadrži Popper.
• 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.

Primjeri

Omogući opise alata

Kao što je gore spomenuto, morate pokrenuti opise alata prije nego što se mogu koristiti. Jedan od načina da se inicijaliziraju svi opisi alata na stranici bio bi da se odaberu prema njihovim data-bs-toggleatributima, ovako:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Opisi na poveznicama

Zadržite pokazivač iznad donjih veza da biste vidjeli savjete:

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Prilagođeni opisi alata

Izgled opisa alata možete prilagoditi pomoću CSS varijabli . Postavljamo prilagođenu klasu data-bs-custom-class="custom-tooltip"za opseg našeg prilagođenog izgleda i koristimo je za nadjačavanje lokalne CSS varijable.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Upute

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Uz SVG:

CSS

Varijable

Kao dio Bootstrapovog pristupa CSS varijablama koji se razvija, opisi sada koriste lokalne CSS varijable .tooltipza poboljšanu prilagodbu u stvarnom vremenu. Vrijednosti za CSS varijable postavljaju se putem Sass-a, tako da je i dalje podržana prilagodba Sass-a.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Mogućnosti

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjesto data-bs-customClass="beautifier".

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može sadržavati jednostavnu konfiguraciju komponente kao JSON niz. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka nadjačat će vrijednosti dane na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Korištenje funkcije sapopperConfig

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

Metode

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Događaji

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()