Lekce 26 - Bootstrap - Tooltipy

V minulé lekci, Bootstrap - Scrollspy, jsme dokončili skrolovacího špiona.

Dnes v našem kurzu CSS frameworku Bootstrap dokončíme popis komponenty Tooltips.

Tooltips

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:

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

Platí zde podobná omezení jako u dalších komponent založených na Popper.js. 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

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 /><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 dosažení funkcionality je pochopitelně potřeba JavaScript, přesněji nám již známý Popper.js. Pokud používáte kompletní JS balík (bundle) Bootstrapu, tak ten již Popper.js obsahuje. Elementům, u kterých chceme tooltipy zobrazovat, vyplníme atribut title. Dále přidáme data atribut `data-toggle="tooltip". Nezapomeňte komponentu ještě explicitně inicializovat na konci stránky. Výsledek v prohlížeči:

Tooltipy v Bootstrap

tooltipy.html

K určení pozice tooltipu jsme přidali atribut data-placement="right". Pro povolení zobrazování HTML obsahu jsme přidali atribut data-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-. Pokud bychom chtěli vlastnosti inicializovat v JavaScriptu, můžeme to udělat předáním objektu s těmito vlastnostmi metodě tooltip():

$('#nejaky-tooltip').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 (pomocí jQuery metody 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 .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="arrow"></div><div class="tooltip-inner"></div></div>'

title - Výchozí titulek, pokud není zadán data atributem data-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 "click".
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ůžete 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 "flip", "clockwise" a "counterclockwise" nebo pole hodnot. Výchozí hodnota je "flip".

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.

Metodě tooltip() můžeme předat jeden z následujících parametrů:

nastaveni - Můžeme předat objekt s vlastnostmi a tak provést nastavení, jako jsme si již ukázali výš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.

Události

Za určitých okolností můžeme potřebovat reagovat na jednotlivé události tooltipů. Těch je celkem 5:

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 by mohla vypadat např. takto:

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

Gratuluji, touto lekcí máte kompletní povědomí o všech Bootstrap komponentách! Je úctyhodné, že jste se dostali až sem, mnoho studentů před vámi to již jistě vzdalo. Další dobrá zpráva je, že nás čekají opravdu velmi užitečné lekce. Uvidíme se zas v příští lekci.

V další lekci, Bootstrap - Multimediální objekty a kontejnery, probereme mediální objekty na statusy, komentáře a kontejnery.

Článek pro vás napsal David Čápka

Uživatelské hodnocení:

186 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity