Popisky

Dokumentace a příklady pro přidávání vlastních tipů nástrojů Bootstrap s CSS a JavaScript pomocí CSS3 pro animace a datové atributy pro místní úložiště titulků.

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!
• Pokud vytváříte náš JavaScript ze zdroje, vyžadujeutil.js .
• 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-toggleatributu:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

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.

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

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:

$('#example').tooltip(options)

$('#example').tooltip({ boundary: 'window' })

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-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="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 náhradní řešení budete chtít spouštět nápovědu z obálky <div>nebo <span>, v ideálním případě nastavit tak, aby bylo možné zaměřit se na klávesnici pomocí tabindex="0", a přepsat pointer-eventsprvek na zakázaném prvku.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" 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-, jako v data-animation="".

Metody

$().tooltip(options)

Připojí obslužný program popisku ke kolekci prvků.

.tooltip('show')

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

$('#element').tooltip('show')

.tooltip('hide')

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.

$('#element').tooltip('hide')

.tooltip('toggle')

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.

$('#element').tooltip('toggle')

.tooltip('dispose')

Skryje a zničí popisek prvku. 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.

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Aktualizuje polohu popisku prvku.

$('#element').tooltip('update')

Události

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})