Popisy

Prehľad

Čo by ste mali vedieť pri používaní doplnku tooltip:

• Pri určovaní polohy sa popisy spoliehajú na knižnicu Popper tretej strany . Aby popisky fungovali, musíte zahrnúť popper.min.js pred bootstrap.js alebo použiť bootstrap.bundle.min.js/ bootstrap.bundle.jsktorý obsahuje Popper!
• Popisy sú aktivované z dôvodov výkonu, takže ich musíte inicializovať sami .
• Popisy s názvami s nulovou dĺžkou sa nikdy nezobrazujú.
• Špecifikujte container: 'body', aby ste sa vyhli problémom s vykresľovaním v zložitejších komponentoch (ako sú naše vstupné skupiny, skupiny tlačidiel atď.).
• Spúšťanie popisov na skrytých prvkoch nebude fungovať.
• Popisy prvkov .disabledalebo disabledprvkov musia byť spustené na prvku obalu.
• Pri spustení z hypertextových odkazov, ktoré presahujú viacero riadkov, budú popisy nástrojov vycentrované. Použite white-space: nowrap;na <a>s, aby ste sa vyhli tomuto správaniu.
• Popisy nástrojov musia byť skryté pred odstránením príslušných prvkov z modelu DOM.
• Popisy nástrojov možno spustiť vďaka prvku vo vnútri tieňového modelu DOM.

Máš to všetko? Skvelé, pozrime sa, ako fungujú s niekoľkými príkladmi.

Príklad: Povoľte popisy všade

Jedným zo spôsobov, ako inicializovať všetky popisy na stránke, je vybrať ich podľa ich data-bs-toggleatribútu:

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

Príklady

Umiestnením kurzora myši na odkazy nižšie zobrazíte popisy:

Umiestnením kurzora myši na tlačidlá nižšie zobrazíte štyri smery popisov: hore, vpravo, dole a vľavo. Pokyny sa zrkadlia pri použití Bootstrapu v RTL.

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

A s pridaným vlastným HTML:

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

S SVG:

Sass

Premenné

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

Použitie

Doplnok tooltip generuje obsah a značky na požiadanie a v predvolenom nastavení umiestňuje popisky za ich spúšťací prvok.

Spustite popis pomocou JavaScriptu:

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')
})

Označenie

Požadované označenie pre popis je iba dataatribút a titlena elemente HTML chcete mať popis. Vygenerované označenie popisku je pomerne jednoduché, aj keď vyžaduje pozíciu (v predvolenom nastavení topju doplnok nastaví na hodnotu).

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

Zakázané prvky

Prvky s disabledatribútom nie sú interaktívne, čo znamená, že používatelia na ne nemôžu zaostriť, umiestniť kurzor myši alebo kliknúť na ne, aby vyvolali popis (alebo kontextové okno). Ako riešenie budete chcieť spustiť popis z obalu <div>alebo <span>, ideálne tak, aby bolo možné zamerať sa na klávesnicu pomocou 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>

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-bs-, ako v data-bs-animation="". Pri odovzdávaní možností cez dátové atribúty nezabudnite zmeniť typ prípadu názvu možnosti z camelCase na kebab-case. Napríklad namiesto použitia data-bs-customClass="beautifier"použite data-bs-custom-class="beautifier".

Použitie funkcie spopperConfig

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

Metódy

šou

Zobrazí popis prvku. Vráti sa k volajúcemu skôr, ako sa skutočne zobrazil popis (tj predtým, ako shown.bs.tooltipdôjde k udalosti). Toto sa považuje za „manuálne“ spustenie popisku. Popisy s názvami s nulovou dĺžkou sa nikdy nezobrazujú.

tooltip.show()

skryť

Skryje popis prvku. Vráti sa k volajúcemu skôr, ako bol popis skutočne skrytý (tj pred výskytom hidden.bs.tooltipudalosti). Toto sa považuje za „manuálne“ spustenie popisku.

tooltip.hide()

prepnúť

Prepína popis prvku. Vráti sa k volajúcemu skôr, ako sa popis skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.tooltipalebo ). hidden.bs.tooltipToto sa považuje za „manuálne“ spustenie popisku.

tooltip.toggle()

disponovať

Skryje a zničí popis prvku (odstráni uložené údaje v prvku DOM). Popisy, ktoré používajú delegovanie (ktoré sú vytvorené pomocou voľby ) selector, nemožno jednotlivo zničiť na podradených spúšťacích prvkoch.

tooltip.dispose()

povoliť

Umožňuje zobraziť popis prvku. Popisy sú predvolene povolené.

tooltip.enable()

zakázať

Odstráni možnosť zobrazenia popisu prvku. Popis bude možné zobraziť iba vtedy, ak bude znova povolený.

tooltip.disable()

toggleEnabled

Prepína možnosť zobrazenia alebo skrytia popisku prvku.

tooltip.toggleEnabled()

aktualizovať

Aktualizuje polohu popisku prvku.

tooltip.update()

getInstance

Statická metóda, ktorá vám umožňuje získať inštanciu popisu priradenú k prvku DOM

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

getOrCreateInstance

Statická metóda, ktorá vám umožňuje získať inštanciu popisu priradenú k prvku DOM alebo vytvoriť novú v prípade, že nebola inicializovaná

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

Diania

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

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

tooltip.hide()