Přejít na hlavní obsah Přejít na navigaci v dokumentech
in English

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.
  • 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.
Ve výchozím nastavení tato komponenta používá vestavěný dezinfekce obsahu, který odstraňuje všechny prvky HTML, které nejsou výslovně povoleny. Další podrobnosti najdete v sekci dezinfekce v naší JavaScriptové dokumentaci .
Efekt animace této komponenty závisí na prefers-reduced-motiondotazu na média. Podívejte se na část s omezeným pohybem v naší dokumentaci přístupnosti .

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-bs-toggleatributu:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

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.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Příklad

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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. Pokyny jsou zrcadleny při použití Bootstrapu v RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-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í.

Pro zavření při dalším kliknutí je vyžadováno specifické označení

Pro správné chování mezi prohlížeči a platformami musíte použít <a>značku, nikoli značku <button>, a také musíte zahrnout tabindexatribut.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  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 obalu <div>nebo <span>, v ideálním případě se lze zaměřit na klávesnici pomocí tabindex="0".

U zakázaných spouštěčů vyskakovacích oken můžete také upřednostnit data-bs-trigger="hover focus", 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" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sass

Proměnné

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Používání

Povolit vyskakovací okna prostřednictvím JavaScriptu:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Aby vyskakovací okna fungovala pro uživatele klávesnice a asistenčních technologií

Chcete-li umožnit uživatelům klávesnice aktivovat vaše vyskakovací okna, měli byste je přidat pouze do prvků HTML, které jsou tradičně zaměřeny na klávesnici a jsou interaktivní (jako jsou odkazy nebo ovládací prvky formuláře). Ačkoli lze libovolné prvky HTML (například <span>s) upravit tak, aby bylo možné zaměřit se přidáním tabindex="0"atributu, přidá to uživatelům klávesnice potenciálně nepříjemné a matoucí zarážky tabulátoru na neinteraktivních prvcích a většina asistenčních technologií v současné době neoznamuje obsah vyskakovacího okna. . Kromě toho se nespoléhejte pouze na hoverspouštěcí prvek pro vaše vyskakovací okna, protože to znemožní jejich spuštění pro uživatele klávesnice.

I když pomocí této možnosti můžete do vyskakovacích oken vkládat bohatý, strukturovaný kód HTML html, důrazně doporučujeme, abyste nepřidávali nadměrné množství obsahu. Popovery v současnosti fungují tak, že jakmile se zobrazí, jejich obsah je svázán se spouštěcím prvkem s aria-describedbyatributem. Výsledkem je, že veškerý obsah vyskakovacího okna bude uživatelům asistenčních technologií oznámen jako jeden dlouhý, nepřerušovaný stream.

Navíc, i když je možné do vyskakovacího okna zahrnout také interaktivní ovládací prvky (jako jsou prvky formuláře nebo odkazy) (přidáním těchto prvků k allowListpovoleným atributům a tagům), uvědomte si, že vyskakovací okno v současné době neřídí pořadí fokusu klávesnice. Když uživatel klávesnice otevře vyskakovací okno, fokus zůstane na spouštěcím prvku, a protože vyskakovací okno obvykle nenásleduje okamžitě po spouštěči ve struktuře dokumentu, není zaručeno, že pohyb vpřed/stisknutíTABpřesune uživatele klávesnice do samotného vyskakovacího okna. Stručně řečeno, pouhé přidání interaktivních ovládacích prvků do vyskakovacího okna pravděpodobně způsobí, že tyto ovládací prvky nebudou dostupné/nepoužitelné pro uživatele klávesnice a uživatele asistenčních technologií, nebo přinejmenším způsobí nelogické celkové pořadí zaměření. V těchto případech zvažte použití modálního dialogu.

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

Všimněte si, že z bezpečnostních důvodů nelze volby sanitize, sanitizeFn, a allowListzadat pomocí datových atributů.
název Typ Výchozí Popis
animation booleovský true Na vyskakovací okno použijte přechod prolínání CSS
container řetězec | prvek | Nepravdivé false

Připojí vyskakovací okno ke konkrétnímu prvku. Příklad: container: 'body'. Tato možnost je užitečná zejména v tom, že vám umožňuje umístit vyskakovací okno v toku dokumentu blízko spouštěcího prvku – což zabrání tomu, aby vyskakovací okno odplouval pryč od spouštěcího prvku během změny velikosti okna.

content řetězec | prvek | funkce ''

Výchozí hodnota obsahu, pokud data-bs-contentatribut není přítomen.

Pokud je zadána funkce, bude volána se svou thisreferenční sadou na prvek, ke kterému je popover připojen.

delay číslo | objekt 0

Zpoždění zobrazení a skrytí popoveru (ms) - nevztahuje se na typ ručního spouštění

Pokud je zadáno číslo, použije se prodleva pro skrytí/zobrazení

Struktura objektu je:delay: { "show": 500, "hide": 100 }

html booleovský false Vložte HTML do vyskakovacího okna. Pokud je false, innerTextvlastnost se použije k vložení obsahu do DOM. Pokud se obáváte útoků XSS, použijte text.
placement řetězec | funkce 'right'

Jak umístit vyskakovací okno - auto | nahoru | dole | vlevo | že jo.
Když autoje zadáno, dynamicky změní orientaci vyskakovacího okna.

Když je k určení umístění použita funkce, je volána s popover uzlem DOM jako prvním argumentem a spouštěcím prvkem DOM uzlem jako druhým. Kontext thisje nastaven na instanci vyskakovacího okna.

selector řetězec | Nepravdivé false Pokud je k dispozici selektor, překryvné objekty budou delegovány na zadané cíle. V praxi se to používá k umožnění přidávání vyskakovacích oken do dynamického obsahu HTML. Podívejte se na tento a informativní příklad .
template tětiva '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Základní HTML, které se použije při vytváření vyskakovacího okna.

Popover titlebude vstříknut do .popover-header.

Popover contentbude vstříknut do .popover-body.

.popover-arrowse stane šipkou vyskakovacího okna.

Nejvzdálenější prvek obalu by měl mít .popovertřídu.

title řetězec | prvek | funkce ''

Výchozí hodnota názvu, pokud titleatribut není přítomen.

Pokud je zadána funkce, bude volána se svou thisreferenční sadou na prvek, ke kterému je popover připojen.

trigger tětiva 'click' Jak se spouští vyskakovací okno - klikněte | vznášet se | zaměření | manuál. Můžete předat více spouštěčů; oddělte je mezerou. manualnelze kombinovat s žádným jiným spouštěčem.
fallbackPlacements pole ['top', 'right', 'bottom', 'left'] Definujte záložní umístění poskytnutím seznamu umístění v poli (v preferovaném pořadí). Další informace najdete v dokumentech Popper's behavior
boundary řetězec | živel 'clippingParents' Hranice omezení přetečení vyskakovacího okna (platí pouze pro Popperův modifikátor preventOverflow). Ve výchozím nastavení je 'clippingParents'a může přijímat referenci HTMLElement (pouze prostřednictvím JavaScriptu). Další informace naleznete v dokumentech DetectOverflow společnosti Popper .
customClass řetězec | funkce ''

Přidejte třídy do vyskakovacího okna, když se zobrazí. Všimněte si, že tyto třídy budou přidány k jakýmkoli třídám uvedeným v šabloně. Chcete-li přidat více tříd, oddělte je mezerami: 'class-1 class-2'.

Můžete také předat funkci, která by měla vrátit jeden řetězec obsahující další názvy tříd.

sanitize booleovský true Povolit nebo zakázat dezinfekci. Pokud je aktivováno 'template', 'content'a 'title'možnosti budou dezinfikovány. Podívejte se na sekci dezinfekce v naší dokumentaci JavaScript .
allowList objekt Výchozí hodnota Objekt, který obsahuje povolené atributy a značky
sanitizeFn null | funkce null Zde si můžete dodat vlastní funkci dezinfekce. To může být užitečné, pokud dáváte přednost použití vyhrazené knihovny k provádění sanitace.
offset pole | řetězec | funkce [0, 8]

Posun vyskakovacího okna vzhledem k jeho cíli. V atributech dat můžete předat řetězec s hodnotami oddělenými čárkami, jako jsou:data-bs-offset="10,20"

Když je funkce použita k určení offsetu, je volána s objektem obsahujícím umístění popper, odkaz a popper rects jako svůj první argument. Uzel DOM spouštěcího prvku je předán jako druhý argument. Funkce musí vrátit pole se dvěma čísly: .[skidding, distance]

Další informace naleznete v Popperově ofsetové dokumentaci .

popperConfig null | objekt | funkce null

Chcete-li změnit výchozí konfiguraci Popperu Bootstrapu, viz Konfigurace Popperu .

Když je funkce použita k vytvoření konfigurace Popper, je volána s objektem, který obsahuje výchozí konfiguraci Popperu Bootstrapu. Pomůže vám použít a sloučit výchozí nastavení s vaší vlastní konfigurací. Funkce musí vrátit konfigurační objekt pro Popper.

Atributy dat pro jednotlivé popovery

Volby pro jednotlivá vyskakovací okna lze alternativně specifikovat pomocí datových atributů, jak je vysvětleno výše.

Použití funkce spopperConfig

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

Metody

Asynchronní metody a přechody

Všechny metody API jsou asynchronní a zahajují přechod . Vrátí se k volajícímu, jakmile je přechod zahájen, ale ještě před jeho ukončením . Kromě toho bude ignorováno volání metody na přechodové komponentě .

Další informace naleznete v naší dokumentaci k JavaScriptu .

ukázat

Odhalí popover prvku. Vrátí se k volajícímu ještě předtím, než se vyskakovací okno skutečně zobrazí (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í.

myPopover.show()

skrýt

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.

myPopover.hide()

přepnout

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.

myPopover.toggle()

zlikvidovat

Skryje a zničí popover prvku (Odstraní uložená data v prvku DOM). 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.

myPopover.dispose()

umožnit

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

myPopover.enable()

zakázat

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

myPopover.disable()

toggleEnabled

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

myPopover.toggleEnabled()

Aktualizace

Aktualizuje pozici vyskakovacího okna prvku.

myPopover.update()

getInstance

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

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

getOrCreateInstance

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

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

Události

Typ události Popis
show.bs.popover Tato událost se spustí okamžitě při showvolání metody instance.
zobrazeno.bs.popover Tato událost se spustí, když se vyskakovací okno zviditelní uživateli (bude čekat na dokončení přechodů CSS).
hide.bs.popover Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý.bs.popover Tato událost se spustí, když je vyskakovací okno skryto před uživatelem (bude čekat na dokončení přechodů CSS).
vložený.bs.popover Tato událost se spustí po show.bs.popoverudálosti, kdy byla šablona vyskakovacího okna přidána do modelu DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})