Lekce 24 - Bootstrap - Popovers

V minulé lekci, Bootstrap - Modální dialogy, jsme se naučili používat modální dialogy.

Dnes se budeme v Bootstrapu věnovat tzv. Popovers.

Popovers

Informační bubliny Popovers jsou podobné tooltipům, které se ovšem nezobrazují a nemizí po přejetí myší, ale reagují na kliknutí. Bootstrap je adoptoval z platformy iOS. Komponenta je založená rovněž na knihovně Popper.js, jako tomu bylo u Dropdowns. Pokud byste náhodou sestavovali Bootstrap JavaScript sami, budete pro Popovers potřebovat i plugin pro Tooltipy, jinak stačí načíst javascriptový Bootstrap balík (bundle) nebo načíst ještě zvlášť před Bootstrapem "popper.min.js".

Inicializace

Z důvodu optimalizace nejsou popovers inicializovány na základě data atributů jako dosavadní komponenty, ale musíme je inicializovat ručně a to např. přes data atributy JavaScriptem:

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

Dalším způsobem inicializace je využít wrapper, tedy obalit element, ze kterého chceme popover vytvořit, dalším elementem a popover vytvořit až z něj. Někdy se může stát, že styly popoveru kolidují s našimi styly a právě řešení s wrapperem tento problém vyřeší, protože popover se vytvoří až z wrapperu, který je bez stylů.

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

Další vlastnosti

Bootstrap by byl rád, abychom o Popovers ještě věděli:

• Pokud bude titulek nebo obsah prázdný string, popover se nezobrazí. K zobrazení nedojde ani v případě, když se pokusíme zobrazit popover na skrytém elementu.
• Při použití spolu s komplexnějšími komponentami jako jsou např. input groups, button group a podobně uvádějte container: body pro vyhnutí se problémům s renderováním.
• Pro zobrazení popoveru z elementu s atributem disabled nebo třídou .disabled je třeba tento element obalit a popover zobrazit pomocí tohoto wrapperu.
• V případě použití popovers na odkazy, které sahají přes více řádek, bude popover vycentrován vzhledem k celkové šířce těchto odkazů. Pro změnu tohoto chování přidáme elementu <a> styl white-space: nowrap;.
• Pokud bychom chtěli elementy, ze kterých jsme vytvořili popovery, odstranit, musíme tyto popovery nejprve skrýt.

Ukázka

Ukažme si 4 tlačítka, která po kliknutí zobrazí popovery v různých směrech okolo nich.

<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="Text popoveru umístěném nahoře.">
    Nahoře
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Text popoveru umístěném vpravo.">
    Vpravo
</button>

<button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Text popoveru umístěném dole.">
    Dole
</button>

<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="left" data-content="Text popoveru umístěném vlevo.">
    Vlevo
</button>

<script>
    $(function () {
        $('[data-toggle="popover"]').popover();
    });
</script>

Všimněte si nutnosti explicitní inicializace JavaScriptem. Výsledek:

V ukázce výše se kvůli výšce prohlížeče zobrazí dolní popover rovněž nahoře a levý vpravo.

Skrytí při kliknutí mimo popover

Určitě jste si v ukázce výše vyzkoušeli, že se popover zavře jen opětovným kliknutím na tlačítko. Toto chování můžeme upravit tak, aby se popover zavřel při kliknutí na cokoli mimo toto tlačítko. Takový popover vytvoříme pomocí data atributu data-trigger="focus".

<a tabindex="0" class="btn btn-lg btn-primary" role="button" data-toggle="popover" data-trigger="focus" title="Skrytí popoveru" data-content="Tento obsah zmizí po kliknutí kamkoli mimo něj.">Test popoveru</a>

Výsledek v prohlížeči:

Stejného chování jsme mohli docílit i nastavením vlastnosti trigger: focus v JavaScriptu. K tlačítkům tohoto typu bychom měli využívat jen elementů <a> s rolí "button" a tabindex="0". Chování na elementu <button> nemusí být v některých prohlížečích podporováno.

JavaScript

To by bylo k popoverům vše, jedná se pouze o jednoduchou komponentu Jako vždy si ještě ukažme, jak se komponenta ovládá přímo z JavaScriptu.

Vlastnosti

Veškeré níže uvedené vlastnosti můžeme nastavit pomocí data atributů. K získání názvu atributu stačí k vlastnosti přidat prefix data-. Pokud bychom chtěli vlastnosti inicializovat v JavaScriptu, můžeme to udělat předáním objektu s těmito vlastnostmi metodě popover():

$(function () {
    $('[data-toggle="popover"]').popover({ animation: false, title: "Informace" });
});

• animation - Zda se má aplikovat animace (výchozí true).
• container - Připojí popover k danému elementu. Pomocí container: body způsobíme přichycení popoveru na element <body> a tak zůstane na správném místě i při změně velikosti okna. Výchozí hodnota je false.
• content - Obsah popoveru, který se použije jako výchozí, když není uvedený v data atributu data-content příslušného elementu. Pokud předáme funkci, bude zavolána v kontextu elementu, ke kterému je popover připojený. Výchozí hodnota je "" (prázdný string).
• delay - Prodleva v milisekundách před zobrazením/skrytím popoveru. Můžeme předat buď jedno číslo nebo specifikovat obě hodnoty předáním objektu s následující strukturou: delay: { "show": 250, "hide": 50 }. Výchozí hodnota je 0.
• html - Zda je v obsahu (content) podporován HTML obsah. Výchozí hodnota je false a tudíž se všechen obsah vloží jako pouhý text (pomocí jQuery metody text()).
• placement - Určuje pozici popoveru, můžeme zadat hodnoty "auto", "top", "bottom", "left" a "right", výchozí je "right". Předat můžeme i funkci, které se předá jako první parametr DOM element s popoverem a jako druhý parametr element tlačítka. Kontext this je nastaven na instanci popoveru.
• selector - Pokud uvedeme příslušný selektor do této vlastnosti, budou popovery fungovat i na dynamicky vloženém obsahu. V opačném případě se popovery zaktivní pouze na elementech přítomných při prvním načtení stránky. Výchozí hodnota je false.
• template - HTML šablona, pomocí které se popover vytvoří. Titulek se vloží do elementu s třídou .popover-header. Obsah se vloží do .popover-body. Jako šipka se použije element se třídou .arrow. Element obalující celý popover by měl mít přiřazenou třídu .popover. Výchozí hodnota je:

'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

• title - Výchozí titulek, pokud není zadán data atributem data-title na příslušném elementu. Můžeme předat i funkci, která je následně spuštěna v kontextu, kde this odkazuje na element, na který je popover připojený. Výchozí hodnota je "" (prázdný string).
• trigger - Určuje způsob, jakým se popover zobrazí/skryje. Můžeme zadat hodnoty "click", "hover", "focus", "manual". Můžeme zadat i více hodnot oddělených mezerou kromě hodnoty "manual", kterou nelze kombinovat. Výchozí hodnota je "click".
• offset - Umožní popover posunout relativně k tlačítku. Posouváme buď o stejnou vzdálenost v obou směrech zadáním jedné hodnoty nebo zadáním dvou hodnot oddělených čárkou. Více hodnot zadáváme jako textový řetězec (např. "10%, 10px"). Můžeme zadat i matematické výpočty. Výchozí hodnota je 0.
• fallbackPlacement - Určuje kterou pozici popover zaujme v případě, že se nevejde na tu určenou. Můžeme uvést hodnoty "flip", "clockwise" a "counterclockwise" nebo pole hodnot. Výchozí hodnota je "flip".

Metody

Všechny metody jsou volané asynchronně a předávají řízení ještě předtím, než dojde k dokončení animace (transition). Pokud zavoláme metodu na popoveru, který právě přehrává transition, bude toto volání metody ignorováno.

Metodě popover() můžeme předat jeden z následujících parametrů:

• nastaveni - Můžeme předat objekt s vlastnostmi a tak provést nastavení, jako jsme si již ukázali výše.
• "show" - Zobrazí popover elementu. Vrací řízení před tím, než se dokončí animace a element se opravdu zobrazí/skryje.
• "hide" - Skryje popover elementu. Vrací řízení před tím, než se dokončí animace a element se opravdu zobrazí/skryje.
• "toggle" - Zobrazí/skryje popover elementu. Vrací řízení před tím, než se dokončí animace a element se opravdu zobrazí/skryje.
• "dispose" - Skryje a zničí popover elementu. Popovery, které mají specifikovaný selector, nemusí být možné vždy zničit.
• "enable" - Umožní popoveru daného elementu, aby mohl být zobrazený. Ve výchozím stavu je zobrazení popoverům umožněno.
• "disable" - Znemožní popoveru daného elementu, aby mohl být zobrazený.
• "toggleEnabled" - Umožní/znemožní popoveru daného elementu, aby mohl být zobrazený.
• "update" - Aktualizuje pozici popoveru.

Události

Za určitých okolností můžeme potřebovat reagovat na jednotlivé události popoverů. Těch je celkem 5:

• show.bs.popover - Zavolá se ihned po zavolání show. Element typicky není ještě zobrazený, protože se přehrává animace.
• shown.bs.popover - Zavolá se ve chvíli zobrazení popoveru (po dokončení animace).
• hide.bs.popover - Zavolá se ihned po zavolání hide. Element typicky není ještě skrytý, protože se přehrává animace.
• hidden.bs.popover - Zavolá se ve chvíli skrytí popoveru (po dokončení animace).
• inserted.bs.popover - Zavolá se po události show.bs.popover, ve chvíli přidání šablony do DOM stránky.

Reakce na události by mohla vypadat např. takto:

$('#informace-popover').on('hidden.bs.popover', function () {
    // nějaká reakce...
});

V příští lekci, Bootstrap - Scrollspy, si řekneme o komponentě Scrollspy.