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 Tooltips. Představíme si jejich jejich inicializace a ovládání JavaScriptem.

Tooltips v Bootstrapu

Dostáváme se k poslední komponentě z nabídky CSS frameworku Bootstrap. Tooltips jsou malé informační bubliny, které se zobrazí při podržení kurzoru myši nad určitým elementem. Typicky obsahují dodatečné vysvětlení nějakého pojmu nebo nápovědu jak s elementem pracovat. Jedná se v podstatě o hezčí podobu informace vkládané do HTML atributu title kteréhokoli elementu. Ta se v prohlížeči ve výchozím nastavení zobrazí až po chvíli setrvání kurzoru nad daným elementem. Tooltip vypadá o něco graficky lépe a zobrazí se ihned. Z důvodu podobnosti s title obsah tooltipu zapisujeme také 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. Před ukončovací tag </body> obvykle vkládáme za tímto účelem 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 prvně 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ů, zobrazí se 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 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žností 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 - zda se má aplikovat animace (výchozí 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 - zda je v obsahu (content) podporován HTML obsah. Výchozí hodnota je false a tudíž se všechen obsah vloží jako pouhý text.
• placement - Určuje 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 uvedeme příslušný selektor do této vlastnosti, 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 se 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, která 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". Můžeme zadat i více hodnot oddělených mezerou kromě hodnoty "manual", kterou nelze kombinovat. Výchozí hodnota je "hover focus",
• offset - umožní tooltip posunout relativně k jeho elementu. Posouváme buď o stejný kousek 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řed tím, než se dokončí animace a element se opravdu zobrazí/skryje.
• hide() - Skryje tooltip elementu. Vrací řízení před tím, než se dokončí animace a element se opravdu zobrazí/skryje.
• toggle() - Zobrazí/skryje tooltip elementu. Vrací řízení před tí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á vám umožní získat instanci popisku přidruženou k prvku DOM.
• getOrCreateInstance() - Statická metoda, která vám umožní získat instanci popisku přidruženou k prvku DOM nebo vytvořit novou v případě, že nebyla 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.