Popovers

Dokumentace a příklady pro přidávání vyskakovacích oken Bootstrap, jako jsou ty, které se nacházejí v systému iOS, do jakéhokoli prvku na vašem webu.

Přehled

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

• Popovers se při polohování spoléhají na knihovnu Popper třetí strany . Aby popover fungovaly , musíte před bootstrap.js zahrnout popper.min.js nebo použít bootstrap.bundle.min.js/ bootstrap.bundle.jskterý obsahuje Popper!
• Popovers vyžadují plugin tooltip jako závislost.
• Pokud vytváříte náš JavaScript ze zdroje, vyžadujeutil.js .
• Popovers jsou z výkonnostních důvodů volitelná, takže je musíte inicializovat sami .
• Nulová délka titlea contenthodnoty nikdy nezobrazí vyskakovací okno.
• 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í vyskakovacích oken na skrytých prvcích nebude fungovat.
• Popover pro .disablednebo disabledprvky musí být spuštěny na prvku obalu.
• Při spuštění z kotev, které se zalomí přes více čar, budou vyskakovací okna vycentrována mezi celkovou šířkou kotev. Chcete-li se tomuto chování vyhnout, použijte .text-nowrapna svém s.<a>
• Popovers musí být skryty, než budou jejich odpovídající prvky odstraněny z DOM.
• Popovers lze spustit díky prvku uvnitř stínového DOM.

Pokračujte ve čtení, abyste viděli, jak popover fungují s některými příklady.

Příklad: Povolit vyskakovací okna všude

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

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

Příklad: Použití containervolby

Pokud máte nějaké styly v nadřazeném prvku, které narušují vyskakovací okno, budete chtít zadat vlastní container, aby se v tomto prvku místo toho zobrazil kód HTML vyskakovacího okna.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Příklad

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Čtyři směry

K dispozici jsou čtyři možnosti: zarovnání nahoře, vpravo, dole a vlevo.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

Zavřít při dalším kliknutí

Pomocí focusspouštěče zavřete vyskakovací okna při dalším kliknutí uživatele na jiný prvek, než je prvek přepínání.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

Zakázané prvky

Prvky s disabledatributem nejsou interaktivní, což znamená, že uživatelé na ně nemohou umístit kurzor myši nebo na ně kliknout, aby vyvolali vyskakovací okno (nebo popisek). Jako náhradní řešení budete chtít spustit vyskakovací okno z obálky <div>nebo <span>přepsat pointer-eventsprvek na zakázaném prvku.

U zakázaných spouštěčů vyskakovacích oken můžete také upřednostnit data-trigger="hover", aby se vyskakovací okno zobrazilo vašim uživatelům jako okamžitá vizuální zpětná vazba, protože nemusí očekávat, že kliknou na zakázaný prvek.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Používání

Povolit vyskakovací okna prostřednictvím JavaScriptu:

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

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

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

$().popover(options)

Inicializuje vyskakovací okna pro kolekci prvků.

.popover('show')

Odhalí popover prvku. Vrátí se k volajícímu dříve, než se vyskakovací okno skutečně zobrazilo (tj. než dojde k shown.bs.popoverudálosti). Toto je považováno za „ruční“ spuštění vyskakovacího okna. Popovery, jejichž název i obsah mají nulovou délku, se nikdy nezobrazují.

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

.popover('hide')

Skryje popover prvku. Vrátí se k volajícímu dříve, než byl vyskakovací okno skutečně skryt (tj. než dojde k hidden.bs.popoverudálosti). Toto je považováno za „ruční“ spuštění vyskakovacího okna.

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

.popover('toggle')

Přepíná vyskakovací okno prvku. Vrátí se k volajícímu předtím, než se vyskakovací okno skutečně zobrazí nebo skryje (tj. než dojde k události shown.bs.popovernebo ). hidden.bs.popoverToto je považováno za „ruční“ spuštění vyskakovacího okna.

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

.popover('dispose')

Skryje a zničí popover prvku. Popovers, která používají delegování (která jsou vytvořena pomocí volby ) selector, nelze jednotlivě zničit na podřízených spouštěcích prvcích.

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

.popover('enable')

Umožňuje zobrazení vyskakovacího okna prvku. Popovers jsou ve výchozím nastavení povoleny.

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

.popover('disable')

Odebere možnost zobrazení vyskakovacího okna prvku. Vyskakovací okno se bude moci zobrazit pouze v případě, že bude znovu povoleno.

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

.popover('toggleEnabled')

Přepíná možnost zobrazení nebo skrytí vyskakovacího okna prvku.

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

.popover('update')

Aktualizuje pozici vyskakovacího okna prvku.

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

Události

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