26. diel - Bootstrap - Tooltipy

V minulej lekcii, Bootstrap - Scrollspy, sme si predstavili komponent Scrollspy.

V tomto tutoriále kurzu CSS frameworku Bootstrap si popíšeme komponent Tooltips. Predstavíme si ich ich inicializáciu a ovládanie JavaScriptom.

Tooltips v Bootstrape

Dostávame sa k poslednému komponentu z ponuky CSS frameworku Bootstrap. Tooltips sú malé informačné bubliny, ktoré sa zobrazia pri podržaní kurzora myši nad určitým elementom. Typicky obsahujú dodatočné vysvetlenie nejakého pojmu alebo nápovedu ako s elementom pracovať. Ide v podstate o krajšiu podobu informácie vkladanej do HTML atribútu title ktoréhokoľvek elementu. Tá sa v prehliadači v predvolenom nastavení zobrazí až po chvíli zotrvania kurzora nad daným elementom. Tooltip vyzerá o niečo graficky lepšie a zobrazí sa ihneď. Z dôvodu podobnosti s title obsah tooltipu zapisujeme aj do tohto atribútu a navyše uvádzame dáta atribút.

Inicializácia

Kvôli optimalizácii nie sú tooltipy inicializované automaticky, ale musíme sa o ne postarať sami. Pred ukončovací tag </body> obvykle vkladáme za týmto účelom nasledujúci kód:

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

Platia tu podobné obmedzenia ako pri ďalších podobných komponentoch. Ak tooltip nemá nastavený titulok, nezobrazí sa. Pri používaní tooltipu v komplexných štruktúrach by sme im mali nastaviť container: "body". Tooltipy sa nezobrazia na skrytých elementoch. Pokiaľ by sme ich chceli zobraziť na elementoch s atribútom disabled alebo triedou .disabled, musíme taký element prvýkrát obaliť nejakým wrapperom a tooltip použiť naň. Pokiaľ tooltip aplikujeme na odkaz, ktorý je zalomený cez viac riadkov, zobrazí sa v stredu. Toto správanie môžeme zmeniť pridaním white-space: nowrap k elementu <a>. Pokiaľ budeme chcieť elementy odstrániť z DOM, musíme najprv skryť ich tooltipy. Tooltipy by sme mali pridávať iba k odkazom a formulárovým prvkom, teda elementom, ktoré je možné vybrať klávesnicou a od ktorých užívateľ prirodzene očakáva interaktivitu. Vďaka tomu budú podporované hlasovými čítačkami.

Ukážka bude tentoraz jednoduchá, tooltip nastavíme tlačidlu a odkazu. Ukážeme si, ako zmeniť jeho umiestnenie a ako do neho vložiť HTML obsah:

<br />
<p>Hover over the buttons to see <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="So this information bubble :)">tooltip</a>.</p>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="We support png and jpeg files. This tooltip is on the right.">
    Insert image
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="You can also insert <strong>HTML code</strong> into tooltips.">
    Tooltip with 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>

Na dosiahnutie funkcionality je pochopiteľne potrebný JavaScript. Elementom, pri ktorých chceme tooltipy zobrazovať, vyplníme atribút title. Ďalej pridáme dáta atribút data-bs-toggle="tooltip". Nezabudnime komponent ešte explicitne inicializovať na konci stránky. Výsledok v prehliadači:

Na určenie pozície tooltipu sme pridali atribút data-bs-placement="right". Na povolenie zobrazovania HTML obsahu sme pridali atribút data-bs-html="true".

JavaScript

Keďže sa jedná o javascriptový komponent, máme tu opäť bohaté možnosťou jej kontroly JavaScriptom.

Vlastnosti

Všetky nižšie uvedené vlastnosti môžeme nastaviť pomocou dáta atribútov. Na získanie názvu atribútu stačí k vlastnosti pridať prefix data-bs-. Ak by sme chceli vlastnosti inicializovať v JavaScripte, môžeme to urobiť odovzdaním objektu s týmito vlastnosťami metóde tooltip():

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

Pozrime sa na jednotlivé vlastnosti bližšie:

• animation - či sa má aplikovať animácia (predvolené true),
• container - pripojí tooltip k danému elementu. Pomocou container: body spôsobíme prichytenie tooltipu na element <body> a tak zostane na správnom mieste aj pri zmene veľkosti okna. Predvolená hodnota je false,
• delay - oneskorenie v milisekundách pred zobrazením/skrytím tooltipu. Môžeme odovzdať buď jedno číslo alebo špecifikovať obe hodnoty odovzdaním objektu s nasledujúcou štruktúrou: delay: { "show": 250, "hide": 50 }. Predvolená hodnota je 0,
• html - či je v obsahu (content) podporovaný HTML obsah. Predvolená hodnota je false a preto sa všetok obsah vloží ako obyčajný text.
• placement - Určuje pozíciu tooltipu, môžeme zadať hodnoty "auto", "top", "bottom", "left" a "right", východisková je "right". Odovzdať môžeme aj funkciu, ktorá sa odovzdá ako prvý parameter DOM element s tooltipom a ako druhý parameter element, ktorý tooltip vyvolal. Kontext this je nastavený na inštanciu tooltipu,
• selector - pokiaľ uvedieme príslušný selektor do tejto vlastnosti, budú tooltipy fungovať aj na dynamicky vloženom obsahu. V opačnom prípade sa tooltipy zapínajú iba na elementoch prítomných pri prvom načítaní stránky. Predvolená hodnota je false.
• template - HTML šablóna, pomocou ktorej sa tooltip vytvorí. Titulok sa vloží do elementu s triedou .tooltip-inner. Ako šípka sa použije element s triedou .tooltip-arrow. Element obaľujúci celý tooltip by mal mať priradenú triedu .tooltip. Predvolená hodnota je:

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

• title - predvolený titulok, pokiaľ nie je zadaný dáta atribútom data-bs-title na príslušnom elemente. Môžeme odovzdať aj funkciu, ktorá je následne spustená v kontexte, kde this odkazuje na element, na ktorý je tooltip pripojený. Predvolená hodnota je "" (prázdny string),
• trigger - určuje spôsob, akým sa tooltip zobrazí/skryje. Môžeme zadať hodnoty "click", "hover", "focus", "manual". Môžeme zadať aj viac hodnôt oddelených medzerou okrem hodnoty "manual", ktorú nemožno kombinovať. Predvolená hodnota je "hover focus",
• offset - umožní tooltip posunúť relatívne k jeho elementu. Posúvame buď o rovnaký kúsok v oboch smeroch zadaním jednej hodnoty alebo zadaním dvoch hodnôt oddelených čiarkou. Viac hodnôt zadávame ako textový reťazec (napr. "10%, 10px"). Môžeme použiť aj matematické výpočty. Predvolená hodnota je 0.
• fallbackPlacement - určuje ktorú pozíciu tooltip zaujme v prípade, že sa nezmestí na tú určenú. Môžeme uviesť hodnoty "top", "right", "bottom" a "left".

Metódy

Všetky metódy sú volané asynchrónne a odovzdávajú konania ešte predtým, než dôjde k dokončeniu animácie (transition). Pokiaľ zavoláme metódu na tooltipu, ktorý práve prehráva transition, bude toto volanie metódy ignorované.

Na jednotlivé metódy sa pozrime bližšie:

• show() - Zobrazí tooltip elementu. Vracia riadenie pred tým, než sa dokončí animácia a element sa naozaj zobrazí/skryje.
• hide() - Skryje tooltip elementu. Vracia riadenie pred tým, než sa dokončí animácia a element sa naozaj zobrazí/skryje.
• toggle() - Zobrazí/skryje tooltip elementu. Vracia riadenie pred tým, než sa dokončí animácia a element sa naozaj zobrazí/skryje.
• dispose() - Skryje a zničí tooltip elementu. Tooltipy, ktoré majú špecifikovaný selector, nemusia byť možné vždy zničiť.
• enable() - Umožní tooltipu daného elementu, aby mohol byť zobrazený. V predvolenom stave je zobrazenie tooltipom umožnené.
• disable() - Znemožní tooltipu daného elementu, aby mohol byť zobrazený.
• toggleEnabled() - Umožní/znemožní tooltipu daného elementu, aby mohol byť zobrazený.
• update() - Aktualizuje pozíciu tooltipu.
• getInstance() - Statická metóda, ktorá vám umožní získať inštanciu popisku pridruženú k prvku DOM.
• getOrCreateInstance() - Statická metóda, ktorá vám umožní získať inštanciu popisku pridruženú k prvku DOM alebo vytvoriť novú v prípade, že nebola inicializovaná.

Udalosti

Za určitých okolností môžeme potrebovať reagovať na jednotlivé udalosti tooltipov. Tých je celkom päť:

• show.bs.tooltip - Zavolá sa ihneď po zavolaní show. Element typicky nie je ešte zobrazený, pretože sa prehráva animácia.
• shown.bs.tooltip - Zavolá sa vo chvíli zobrazenia tooltipu (po dokončení animácie).
• hide.bs.tooltip - Zavolá sa ihneď po zavolaní hide. Element typicky nie je ešte skrytý, pretože sa prehráva animácia.
• hidden.bs.tooltip - Zavolá sa vo chvíli skrytia tooltipu (po dokončení animácie).
• inserted.bs.tooltip - Zavolá sa po udalosti show.bs.tooltip vo chvíli pridania šablóny do DOM stránky.

Reakcia na udalosti vyzerá napríklad takto:

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

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
    // some reaction...
});

tooltip.hide()

V ďalšej lekcii, Bootstrap - Multimediálne objekty a kontajnery, preberieme mediálne objekty na statusy, komentáre a kontajnery.