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:
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. Pomocoucontainer: body
spôsobíme prichytenie tooltip na element<body>
a tak zostane na správnom mieste aj pri zmene veľkosti okna. Predvolená hodnota jefalse
.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 je0
.html
- Či je v obsahu (content
) podporovaný HTML obsah. Predvolená hodnota jefalse
a teda sa všetok obsah vloží ako púhy text (pomocou jQuery metódytext()
).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. Kontextthis
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 jefalse
.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útomdata-title
na príslušnom elementu. Môžeme odovzdať aj funkciu, ktorá je následne spustená v kontexte, kdethis
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 je0
.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"
.
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.
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 udalostishow.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.