Lekce 26 - Bootstrap - Tooltipy

V minulé lekci, Bootstrap - Scrollspy, jsme si představili komponentu Scrollspy.

V tomto tutoriálu kurzu CSS frameworku Bootstrap si popíšeme komponentu tooltipy (Tooltips). Představíme si jejich inicializace a ovládání JavaScriptem.

Tooltipy v Bootstrapu

Dostáváme se k jedné z posledních komponent z nabídky CSS frameworku Bootstrap – tooltipům (Tooltips). Jedná se o malé informační bubliny, které se zobrazí při setrvání kurzoru myši nad určitým elementem. Obvykle poskytují dodatečné vysvětlení nějakého pojmu nebo nápovědu, jak s elementem pracovat. V podstatě představují vizuálně vylepšenou alternativu k informacím vkládaným do HTML atributu title kteréhokoli elementu. Na rozdíl od standardního chování prohlížeče, kde se informace zobrazí až po delší chvíli, se tooltip objeví okamžitě a vypadá graficky lépe. Z důvodu podobnosti s title zapisujeme obsah tooltipu právě do tohoto atributu a navíc uvádíme data atribut.

Inicializace

Kvůli optimalizaci nejsou tooltipy inicializovány automaticky, ale musíme se o ně postarat sami. Za tímto účelem obvykle před ukončovací tag </body> vkládáme následující kód:

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

Platí zde podobná omezení jako u dalších podobných komponent. Pokud tooltip nemá nastavený titulek, nezobrazí se. Při používání tooltipu v komplexních strukturách bychom jim měli nastavit container: "body". Tooltipy se nezobrazí na skrytých elementech. Pokud bychom je chtěli zobrazit na elementech s atributem disabled nebo třídou .disabled, musíme takový element nejprve obalit nějakým wrapperem a tooltip použít na něj. Pokud tooltip aplikujeme na odkaz, který je zalomený přes více řádků, tooltip se zobrazí ve středu. Toto chování můžeme změnit přidáním white-space: nowrap k elementu <a>. Pokud budeme chtít elementy odstranit z DOM, musíme nejprve skrýt jejich tooltipy. Tooltipy bychom měli přidávat pouze k odkazům a formulářovým prvkům, tedy elementům, které lze vybrat klávesnicí a od kterých uživatel přirozeně očekává interaktivitu. Díky tomu budou tooltipy podporované hlasovými čtečkami.

Ukázka bude tentokrát jednoduchá, tooltip nastavíme tlačítku a odkazu. Ukážeme si, jak změnit jeho umístění a jak do něj vložit HTML obsah:

<br />
<p>Najetím na tlačítka níže se zobrazí <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Tedy takováto informační bublina :)">tooltip</a>.</p>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Podporujeme soubory png a jpeg. Tento tooltip je vpravo.">
    Vložit obrázek
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="Do tooltipů lze vkládat i <strong>HTML kód</strong>.">
    Tooltip s HTML
</button>

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

K dosažení funkcionality je pochopitelně potřeba JavaScript. Elementům, u kterých chceme tooltipy zobrazovat, vyplníme atribut title. Dále přidáme data atribut data-bs-toggle="tooltip". Nezapomeňme komponentu ještě explicitně inicializovat na konci stránky. Výsledek v prohlížeči:

K určení pozice tooltipu jsme přidali atribut data-bs-placement="right". Pro povolení zobrazování HTML obsahu jsme přidali atribut data-bs-html="true".

JavaScript

Jelikož se jedná o javascriptovou komponentu, máme zde opět bohaté možnosti její kontroly JavaScriptem.

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-bs-. Pokud bychom chtěli vlastnosti inicializovat v JavaScriptu, můžeme to udělat předáním objektu s těmito vlastnostmi metodě tooltip():

var exampleTooltip = new bootstrap.Tooltip(document.getElementById('nejaky-tooltip'), {
  animation: false,
  title: "Informace"
});

• animation – Nastavuje, zda se má aplikovat animace. Výchozí hodnota je true.
• container – Připojí tooltip k danému elementu. Pomocí container: body způsobíme přichycení tooltipu 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.
• delay – Prodleva v milisekundách před zobrazením/skrytím tooltipu. 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 – Určuje, zda je v obsahu (content) podporován HTML obsah. Výchozí hodnota je false, a tudíž se veškerý obsah vloží jako pouhý text.
• placement – Nastavuje pozici tooltipu, 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 tooltipem a jako druhý parametr element, který tooltip vyvolal. Kontext this je nastaven na instanci tooltipu.
• selector – Pokud do této vlastnosti uvedeme příslušný selektor, budou tooltipy fungovat i na dynamicky vloženém obsahu. V opačném případě se tooltipy 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 tooltip vytvoří. Titulek se vloží do elementu s třídou .tooltip-inner. Jako šipka se použije element s třídou .tooltip-arrow. Element obalující celý tooltip by měl mít přiřazenou třídu .tooltip. Výchozí hodnota je:

<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>

• title – Výchozí titulek, pokud není zadán data atributem data-bs-title na příslušném elementu. Můžeme předat i funkci, jež je následně spuštěna v kontextu, kde this odkazuje na element, na který je tooltip připojený. Výchozí hodnota je "" (prázdný string).
• trigger – Určuje způsob, jakým se tooltip zobrazí/skryje. Můžeme zadat hodnoty "click", "hover", "focus", "manual". Pokud hodnoty oddělíme mezerou, lze je (kromě hodnoty "manual") kombinovat. Výchozí hodnota je "hover focus".
• offset – Umožní tooltip posunout relativně k jeho elementu. 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 použít i matematické výpočty. Výchozí hodnota je 0.
• fallbackPlacement – Určuje, kterou pozici tooltip zaujme v případě, že se nevejde na tu určenou. Můžeme uvést hodnoty "top", "right", "bottom" a "left".

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 tooltipu, který právě přehrává transition, bude toto volání metody ignorováno.

Na jednotlivé metody se podívejme blíže:

• show() – Zobrazí tooltip elementu. Vrací řízení předtím, než se dokončí animace a element se opravdu zobrazí/skryje.
• hide() – Skryje tooltip elementu. Vrací řízení předtím, než se dokončí animace a element se opravdu zobrazí/skryje.
• toggle() – Zobrazí/skryje tooltip elementu. Vrací řízení předtím, než se dokončí animace a element se opravdu zobrazí/skryje.
• dispose() – Skryje a zničí tooltip elementu. Tooltipy, které mají specifikovaný selector, nemusí být možné vždy zničit.
• enable() – Umožní tooltipu daného elementu, aby mohl být zobrazený. Ve výchozím stavu je zobrazení tooltipům umožněno.
• disable() – Znemožní tooltipu daného elementu, aby mohl být zobrazený.
• toggleEnabled() – Umožní/znemožní tooltipu daného elementu, aby mohl být zobrazený.
• update() – Aktualizuje pozici tooltipu.
• getInstance() – Statická metoda, která nám umožní získat instanci popisku přidruženou k prvku DOM.
• getOrCreateInstance() – Statická metoda, která nám umožní získat instanci popisku přidruženou k prvku DOM nebo vytvořit novou v případě, že nebyla instance inicializována.

Události

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

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

Reakce na události vypadá například takto:

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

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
    // nějaká reakce…
});

tooltip.hide()

V další lekci, Bootstrap - Multimediální objekty a kontejnery, probereme mediální objekty na statusy, komentáře a kontejnery.