Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

26. diel - Bootstrap - tooltip

V minulej lekcii, Bootstrap - Scrollspy , sme dokončili skrolovacieho špióna. Dnes v našom kurze CSS frameworku Bootstrap dokončíme opis jeho komponentov.

Tooltips

Dostávame sa k poslednej komponente z ponuky CSS frameworku Bootstrap. Tooltips sú malé informačné bubliny, ktoré sa zobrazí 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ší podobu informácie vkladané do HTML atribútu title ktoréhokoľvek elementu. Tá sa v prehliadači v predvolenom nastavení zobrazí až po chvíli zotrvanie kurzora nad daným elementom. Tooltip vyzerá o niečo graficky lepšie a zobrazí sa ihneď. Z dôvodu podobnosti s title obsah tooltip zapisujeme tiež 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čovacie tag </body> zvyčajne vkladáme na tento účel nasledujúci kód:

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

Platí tu podobné obmedzenia ako u ďalších komponentov založených na Popper.js. Ak tooltip nemá nastavený titulok, nezobrazí sa. Pri používaní tooltip v komplexných štruktúrach by sme im mali nastaviť container: "body". Tooltipy sa nezobrazí na skrytých elementoch. Ak by sme ich chceli zobraziť na elementoch s atribútom disabled alebo triedou .disabled, musíme taký element prvně obaliť nejakým Wrapper a tooltip použiť na neho. Ak 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>. Ak budeme chcieť elementy odstrániť z DOM, musíme najprv skryť ich tooltipy. Tooltipy by sme mali pridávať len k odkazom a formulárovým prvkom, teda elementom, ktoré možno 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

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 /><br /><br />
<p>Najetím na tlačítka níže se zobrazí <a href="#" data-toggle="tooltip" title="Tedy takováto informační bublina :)">tooltip</a>.</p>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-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-toggle="tooltip" data-html="true" title="Do tooltipů lze vkládat i <strong>HTML kód</strong>.">
    Tooltip s HTML
</button>

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

K dosiahnutiu funkcionality je pochopiteľne potreba JavaScript, presnejšie nám už známy Popper.js. Ak používate kompletný JS balík (bundle) Bootstrap, tak ten už Popper.js obsahuje. Elementom, u ktorých chceme tooltipy zobrazovať, vyplníme atribút title. Ďalej pridáme dáta atribút `data-toggle =" tooltip ". Nezabudnite komponent ešte explicitne inicializovať na konci stránky. Výsledok v prehliadači:

Tooltipy v Bootstrap
tooltipy.html

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

Javascript

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

Vlastnosti

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

$('#nejaky-tooltip').tooltip({ animation: false, title: "Informace" });
  • animation - Či sa má aplikovať animácie (predvolené true).
  • container - Pripojí tooltip k danému elementu. Pomocou container: body spôsobíme prichytenie tooltip 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 tooltip. 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 teda sa všetok obsah vloží ako púhy text (pomocou jQuery metódy text()).
  • placement - Určuje pozíciu tooltip, môžeme zadať hodnoty "auto", "top", "bottom", "left" a "right", predvolený je "right". Odovzdať môžeme i funkciu, ktoré sa odovzdá ako prvý parameter DOM element s tooltip a ako druhý parameter element, ktorý tooltip vyvolal. Kontext this je nastavený na inštanciu tooltip.
  • selector - Ak uvedieme príslušný selektor do tejto vlastnosti, budú tooltipy fungovať aj na dynamicky vloženom obsahu. V opačnom prípade sa tooltipy zaktivní iba na elementoch prítomných pri prvom načítaní stránky. Predvolená hodnota je false.
  • template - HTML šablóna, pomocou ktorej sa tooltip vytvoria. Titulok sa vloží do elementu s triedou .tooltip-inner. Ako šípka sa použije element sa triedou .arrow. Element obaľuje celý tooltip by mal mať priradenú triedu .tooltip. Predvolená hodnota:
'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
  • title - Predvolené titulok, pokiaľ nie je zadaný dáta atribútom data-title na príslušnom elementu. 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 "click".
  • 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ôžete 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 "flip", "clockwise" a "counterclockwise" alebo pole hodnôt. Predvolená hodnota je "flip".
Metódy

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

Metóde tooltip() môžeme odovzdať jeden z nasledujúcich parametrov:

  • nastaveni - Môžeme odovzdať objekt s vlastnosťami a tak vykonať nastavenia, ako sme si už ukázali vyššie.
  • "show" - Zobrazí tooltip elementu. Vracia konanie pred tým, než sa dokončí animácie a element sa naozaj zobrazí / skryje.
  • "hide" - Skryje tooltip elementu. Vracia konanie pred tým, než sa dokončí animácie a element sa naozaj zobrazí / skryje.
  • "toggle" - Zobrazí / skryje tooltip elementu. Vracia konanie pred tým, než sa dokončí animácie a element sa naozaj zobrazí / skryje.
  • "dispose" - Skryje a zničí tooltip elementu. Tooltipy, ktoré majú špecifikovaný selector, nemusí byť možné vždy zničiť.
  • "enable" - Umožní tooltip daného elementu, aby mohol byť zobrazený. V predvolenom stave je zobrazenie tooltipům umožnené.
  • "disable" - Znemožní tooltip daného elementu, aby mohol byť zobrazený.
  • "toggleEnabled" - Umožní / znemožní tooltip daného elementu, aby mohol byť zobrazený.
  • "update" - Aktualizuje pozíciu tooltip.
Udalosti

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

  • show.bs.tooltip - Zavolá sa ihneď po zavolaní show. Element typicky nie je ešte zobrazený, pretože sa prehráva animácie.
  • shown.bs.tooltip - Zavolá sa vo chvíli zobrazenie tooltip (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ácie.
  • hidden.bs.tooltip - Zavolá sa vo chvíli skrytie tooltip (po dokončení animácie).
  • inserted.bs.tooltip - Zavolá sa po udalosti show.bs.tooltip vo chvíli pridanie šablóny do DOM stránky.

Reakcia na udalosti by mohla vyzerať napr. Nasledovne:

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

Gratulujem, touto lekcií máte kompletný povedomie o všetkých Bootstrap komponentoch! Je úctyhodné, že ste sa dostali až sem, mnoho študentov pred vami to už iste vzdalo. Ďalšia dobrá správa je, že nás čakajú naozaj veľmi užitočné lekcie. Ovládnu flexbox a konečne tiež grid systém. Uvidíme sa zas v nasledujúcej lekcii, Bootstrap - Multimediálne objekty a kontajnery , kedy si uvedieme multimediálne objekty a kontajnery.


 

Predchádzajúci článok
Bootstrap - Scrollspy
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Bootstrap - Multimediálne objekty a kontajnery
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity