Popisky

Přehled

Co byste měli vědět při používání pluginu tooltip:

• Popisky se při určování polohy spoléhají na knihovnu Popper třetí strany . Aby popisky fungovaly, musíte před bootstrap.js vložit popper.min.js nebo použít bootstrap.bundle.min.js/ bootstrap.bundle.jskterý obsahuje Popper!
• Popisky jsou z důvodu výkonu volitelné, takže je musíte inicializovat sami .
• Popisky s názvy nulové délky se nikdy nezobrazují.
• Určete container: 'body', abyste se vyhnuli problémům s vykreslováním ve složitějších komponentách (jako jsou naše vstupní skupiny, skupiny tlačítek atd.).
• Spouštění popisků u skrytých prvků nebude fungovat.
• Popisky pro prvky .disablednebo disabledmusí být spuštěny na prvku obálky.
• Při spuštění z hypertextových odkazů, které zahrnují více řádků, budou popisky nástrojů vycentrovány. Chcete-li se tomuto chování vyhnout, použijte white-space: nowrap;na svém s.<a>
• Před odstraněním příslušných prvků z modelu DOM musí být popisy nástrojů skryty.
• Popisky lze spouštět díky prvku uvnitř stínového DOM.

Máš to všechno? Skvělé, podívejme se, jak fungují s některými příklady.

Příklad: Povolit popisky všude

Jedním ze způsobů, jak inicializovat všechny popisky na stránce, je vybrat je podle jejich data-bs-toggleatributu:

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

Příklady

Umístěním kurzoru na níže uvedené odkazy zobrazíte popisky:

Umístěním ukazatele myši na níže uvedená tlačítka zobrazíte čtyři směry popisků: nahoře, vpravo, dole a vlevo. Pokyny jsou zrcadleny při použití Bootstrap 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 přidaný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

Proměnné

$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žívání

Plugin tooltip generuje obsah a označení na vyžádání a ve výchozím nastavení umísťuje popisky za jejich spouštěcí prvek.

Spusťte popis pomocí 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čení

Požadované označení pro popis je pouze dataatribut a titlena prvku HTML chcete mít popis. Vygenerované označení popisku je poměrně jednoduché, i když vyžaduje pozici (ve výchozím nastavení topje pluginem nastavena 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 disabledatributem nejsou interaktivní, což znamená, že uživatelé se na ně nemohou zaměřit, umístit na ně ukazatel myši nebo na ně kliknout, aby vyvolali nápovědu (nebo vyskakovací okno). Jako řešení budete chtít spouštět nápovědu z obálky <div>nebo <span>, ideálně tak, aby bylo možné zaostřit na klávesnici pomocí 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 lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-bs-, jako v data-bs-animation="". Ujistěte se, že jste změnili typ případu názvu možnosti z camelCase na kebab-case při předávání možností prostřednictvím datových atributů. Například místo použití data-bs-customClass="beautifier"použijte data-bs-custom-class="beautifier".

Použití funkce spopperConfig

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

Metody

ukázat

Zobrazí popisek prvku. Vrátí se k volajícímu dříve, než se nápověda skutečně zobrazila (tj. než dojde k shown.bs.tooltipudálosti). Toto je považováno za „ruční“ spuštění popisku. Popisky s názvy nulové délky se nikdy nezobrazují.

tooltip.show()

skrýt

Skryje popisek prvku. Vrátí se k volajícímu dříve, než byl popis nástroje skutečně skryt (tj. než dojde k hidden.bs.tooltipudálosti). Toto je považováno za „ruční“ spuštění popisku.

tooltip.hide()

přepnout

Přepíná popisek prvku. Vrátí se k volajícímu dříve, než byl popis nástroje skutečně zobrazen nebo skryt (tj. než dojde k události shown.bs.tooltipnebo ). hidden.bs.tooltipToto je považováno za „ruční“ spuštění popisku.

tooltip.toggle()

zlikvidovat

Skryje a zničí popisek prvku (Odstraní uložená data na prvku DOM). Popisky, které používají delegování (které jsou vytvořeny pomocí volby ) selector, nelze jednotlivě zničit na podřízených spouštěcích prvcích.

tooltip.dispose()

umožnit

Umožňuje zobrazení popisku prvku. Popisky jsou ve výchozím nastavení povoleny.

tooltip.enable()

zakázat

Odebere možnost zobrazení popisku prvku. Popisek bude možné zobrazit pouze v případě, že bude znovu povolen.

tooltip.disable()

toggleEnabled

Přepíná možnost zobrazení nebo skrytí popisku prvku.

tooltip.toggleEnabled()

Aktualizace

Aktualizuje polohu popisku prvku.

tooltip.update()

getInstance

Statická metoda, která umožňuje získat instanci popisku přidruženou k prvku DOM

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

getOrCreateInstance

Statická metoda, která vám umožní získat instanci popisku přidruženou k prvku DOM nebo vytvořit novou v případě, že nebyla inicializována

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

Události

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

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

tooltip.hide()