Popisy

Prehľad

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

• Popisy sa pri určovaní polohy spoliehajú na knižnicu Popper tretej strany . Popper.min.js musíte zahrnúť pred bootstrap.js, alebo použiť ten bootstrap.bundle.min.js, ktorý 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íklady

Povoliť popisy

Ako už bolo spomenuté vyššie, pred použitím musíte inicializovať popisy nástrojov. Jedným zo spôsobov, ako inicializovať všetky popisy na stránke, by bolo vybrať ich podľa ich data-bs-toggleatribútu, napríklad:

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

Popisy pre odkazy

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

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

Vlastné popisy

Vzhľad popisov môžete prispôsobiť pomocou premenných CSS . Nastavili sme vlastnú triedu s data-bs-custom-class="custom-tooltip"na rozsah nášho vlastného vzhľadu a použili sme ju na prepísanie lokálnej premennej CSS.

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

Smery

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

A s pridaným vlastným HTML:

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

S SVG:

CSS

Premenné

Ako súčasť vyvíjajúceho sa prístupu premenných CSS od Bootstrapu, popisy teraz používajú lokálne premenné CSS na .tooltipvylepšené prispôsobenie v reálnom čase. Hodnoty pre premenné CSS sa nastavujú cez Sass, takže prispôsobenie Sass je stále podporované.

  --#{$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 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:                    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

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:

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

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

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 na ne kliknúť, 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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

možnosti

Keďže možnosti možno odovzdať prostredníctvom atribútov údajov alebo jazyka JavaScript, môžete pridať názov možnosti k data-bs-, ako v data-bs-animation="{value}". Pri odovzdávaní možností cez atribúty údajov nezabudnite zmeniť typ prípadu názvu možnosti z „ camelCase “ na „ kebab-case “. Napríklad použite data-bs-custom-class="beautifier"namiesto data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všetky komponenty podporujú experimentálny atribút rezervovaných údajov data-bs-config, ktorý môže obsahovať jednoduchú konfiguráciu komponentu ako reťazec JSON. Ak má prvok atribúty data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné atribúty údajov prepíšu hodnoty uvedené na data-bs-config. Existujúce dátové atribúty môžu navyše obsahovať hodnoty JSON ako data-bs-delay='{"show":0,"hide":150}'.

Použitie funkcie spopperConfig

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

Metódy

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

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

Diania

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

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

tooltip.hide()