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 jefalse
,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 je0
,html
- zda je v obsahu (content
) podporován HTML obsah. Výchozí hodnota jefalse
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. Kontextthis
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 jefalse
.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 atributemdata-bs-title
na příslušném elementu. Můžeme předat i funkci, která je následně spuštěna v kontextu, kdethis
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 je0
.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álostishow.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.