Bootstrap Tooltips

BY admin
|
Advertisements

V tomto tutoriálu se dozvíte, jak vytvořit tooltipy pomocí Bootstrap.

Vytvoření tooltipů pomocí Bootstrapu

Tooltip je malé vyskakovací okno, které se zobrazí, když uživatel umístí ukazatel myši nad prvek, například odkaz nebo tlačítka, a poskytne tak nápovědu nebo informace o prvku, na který se najede.

Tooltipy mohou být velmi užitečné pro nové návštěvníky vašich webových stránek, protože umožňují uživateli zjistit účel ikon a odkazů tím, že na ně umístí ukazatel myši.

Krok 1: Přidání značky Tooltip

Chcete-li vytvořit tooltip, musíte k prvku přidat atribut data-toggle="tooltip". Tolltip text, který by se zobrazil při najetí myší, lze zadat pomocí atributu title.

Zde je standardní značka pro přidání tolltipu k hypertextovému odkazu.

<a href=“#“ data-toggle=“tooltip“ title=“Nějaký text“>Najeďte na mě</a>

Podobně můžete přidat tooltipy k ostatním prvkům, jako jsou tlačítka, ikony atd.

Poznámka: Z výkonnostních důvodů jsou tooltipy data-apis opt in, to znamená, že pro použití tooltipů je musíte sami inicializovat pomocí metody tooltip().

Krok 2: Spuštění tooltipů

Tooltipy lze spouštět pomocí JavaScriptu – stačí zavolat metodu tooltip() Bootstrap pomocí id, class nebo libovolného selektoru CSS cílového prvku v kódu JavaScriptu.

Tooltipy můžete inicializovat buď jednotlivě, nebo všechny najednou. Následující kód jQuery inicializuje všechny tooltipy na stránce tak, že je vybere podle jejich atributu data-toggle.

Příklad

Vyzkoušejte tento kód “ 

<script>$(document).ready(function(){ $('').tooltip(); });</script>

– Výstup výše uvedeného příkladu bude vypadat asi takto:

Nastavení směru zobrazení koncovek nástrojů

Můžete nastavit, aby se koncovky nástrojů zobrazovaly na horní, pravé, spodní a levé straně prvku.

Umístění koncovek nástrojů pomocí datových atributů

Následující příklad vám ukáže, jak nastavit směr koncovek nástrojů pomocí datových atributů.

Pozice tooltipů prostřednictvím JavaScriptu

Následující příklad vám ukáže, jak nastavit směr tooltipů prostřednictvím JavaScriptu.

Možnosti

Existují určité možnosti, které lze předat metodě tooltip() Bootstrap a přizpůsobit tak funkčnost pluginu tooltip.

Název Typ Výchozí hodnota Popis
animace boolean true Použít přechod CSS fade na tooltip.
html boolean false Vloží html do tooltipu. Pokud je false, bude k vložení obsahu do DOM použita metoda text() jQuery. Pokud se obáváte útoků XSS, použijte text.
placement string | function ‚top‘ Nastavuje pozici tooltipu – top | bottom | left | right | auto. Je-li zadána hodnota „auto“, dojde k dynamické změně orientace tooltipu.
selektor řetězec false Pokud je zadán selektor, budou objekty tooltipu připojeny k zadaným cílům.
title string | function “ Nastaví výchozí hodnotu title, pokud není přítomen atribut title.
trigger string ‚hover focus‘ Určí, jakým způsobem se tooltip spustí – kliknutím | hover | focus | ručně. Všimněte si, že můžete předat mutliple trigger, space seperated, trigger types.
delay number | object 0

Time to delay in showing and hiding tooltip (ms) – does not apply to manual trigger type.

Pokud je zadáno číslo, zpoždění se použije jak pro skrytí/zobrazení Struktura objektu je:
delay: { show: 500, hide: 100 }
container string | false false Připojí tooltip k určitému prvku. container: 'body'
šablona řetězec

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

Základní HTML, které se použije při vytváření tooltipu. Nadpis tooltipu bude vložen do elementu s třídou .tooltip-inner a element s třídou .tooltip-arrow se stane šipkou tooltipu.

Vnější obalový element by měl mít třídu .tooltip.
zobrazení řetězec | objekt { selector: 'body', padding: 0 } Udržuje tooltip v mezích tohoto elementu. Příklad: viewport: '#viewport' nebo { selector: '#viewport', padding: 0 }
offset číslo | řetězec 0 Odsazení tooltipu vzhledem k jeho cíli.
fallbackPlacement string | array ‚flip‘ Umožňuje určit, jakou pozici Popper použije při fallbacku.
hranice řetězec | element ‚scrollParent‘ Omezující hranice přetečení nápovědy. Přijímá hodnoty 'viewport', 'window', 'scrollParent' nebo odkaz na HTMLElement (pouze JavaScript).
sanitize boolean true Zapnutí nebo vypnutí sanitizace. Pokud je aktivováno, budou sanitizovány volby ‚template‘ a ‚title‘.
whiteList object value Objekt, který obsahuje povolené atributy a značky.
sanitizeFn null | function null Umožňuje zadat vlastní funkci sanitize.

Tyto možnosti můžete nastavit buď pomocí datových atributů, nebo pomocí JavaScriptu. Pro nastavení voleb tooltipů pomocí datových atributů stačí připojit název volby k data- spolu se správnou hodnotou, například data-animation="false", data-placement="bottom" atd.

Vhodnějším způsobem nastavení těchto voleb je však JavaScript, protože vás zbaví opakované práce. Podívejte se na metodu tooltipu $().tooltip(options) v následující části, abyste věděli, jak nastavit možnosti tooltipů pomocí JavaScriptu.

Metody

Tyto jsou standardní metody tooltipů Bootstrapu:

$().tooltip(options)

Tato metoda připojí obsluhu tooltipu ke skupině prvků. Umožňuje také nastavit možnosti tooltipů, takže si je můžete přizpůsobit podle svých potřeb.

Následující příklad vloží zadaný text dovnitř tooltipu, pokud je u vybraných prvků vynechána nebo chybí hodnota atributu title:

Následující příklad vám ukáže, jak umístit obsah HTML dovnitř tooltipu:

Následující příklad vám ukáže, jak ovládat časování zobrazení a skrytí tooltipu pomocí volby delay tooltipu prostřednictvím JavaScriptu.

Následující příklad vám ukáže, jak můžete vytvořit vlastní šablonu pro tooltipy Bootstrap namísto použití výchozí.

Následující příklad vloží dynamicky generovaný kód HTML tooltipu na konec elementu .wrapper namísto elementu <body>.

Poznámka: Přepsání výchozí hodnoty volby container tooltipu nepřinese na stránce žádný viditelný rozdíl. Chcete-li vidět skutečný výsledek, musíte zkontrolovat výsledný DOM pomocí nástrojů Firebug nebo Developer.

Podobně můžete nastavit další možnosti pro tooltipy pomocí metody $().tooltip(options). Podívejme se na další metody zásuvného modulu Bootstrap tooltip.

.tooltip(‚show‘)

Tato metoda odhalí tooltip prvku.

Příklad

Zkuste tento kód “ 

<script>$(document).ready(function(){ $(".show-tooltip").click(function(){ $("#myTooltip").tooltip('show'); }); });</script>

.tooltip(‚hide‘)

Tato metoda skryje tooltip elementu.

Příklad

Vyzkoušejte tento kód “ 

<script>$(document).ready(function(){ $(".hide-tooltip").click(function(){ $("#myTooltip").tooltip('hide'); }); });</script>

.tooltip(‚toggle‘)

Tato metoda přepíná nápovědu elementu.

Příklad

Vyzkoušejte tento kód “ 

<script>$(document).ready(function(){ $(".toggle-tooltip").click(function(){ $("#myTooltip").tooltip('toggle'); }); });</script>

.tooltip(‚dispose‘)

Tato metoda skryje a zničí tooltip prvku.

.tooltip(‚enable‘)

Tato metoda dává prvku možnost zobrazení tooltipu. Ve výchozím nastavení jsou tooltipy povoleny.

Příklad

Zkuste tento kód “ 

<script>$(document).ready(function(){ $(".enable-tooltip").click(function(){ $("#myTooltip").tooltip('enable'); }); });</script>

.tooltip(‚disable‘)

Tato metoda odstraní možnost zobrazení tooltipu prvku. Tooltip bude možné zobrazit pouze v případě, že bude znovu povolen.

.tooltip(‚toggleEnabled‘)

Tato metoda přepíná možnost zobrazení nebo skrytí tooltipu prvku.

.tooltip(‚update‘)

Tato metoda aktualizuje pozici tooltipu prvku.

Příklad

Vyzkoušejte tento kód “ 

<script>$(document).ready(function(){ $(".update-tooltip").click(function(){ $("#myTooltip").tooltip('update'); }); });</script>

Události

Třída tooltip nástroje Bootstrap obsahuje několik událostí pro připojení k funkci tooltipu.

Událost Popis
show.bs.tooltip Tato událost je vyvolána okamžitě po zavolání metody instance show.
shown.bs.tooltip Tato událost je vyvolána, když byl uživateli zviditelněn tooltip. Počká, dokud nebude zcela dokončen proces přechodu CSS, a teprve poté se vyvolá.
hide.bs.tooltip Tato událost je vyvolána okamžitě, když byla zavolána metoda instance hide.
hidden.bs.tooltip Tato událost je vyvolána, když bylo dokončeno skrytí tooltipu před uživatelem. Počká, až bude proces přechodu CSS zcela dokončen, a teprve poté se vyvolá.
inserted.bs.tooltip Tato událost je vyvolána po události show.bs.tooltip, když byla šablona tooltipu přidána do DOM.

Následující příklad zobrazí uživateli výstražnou zprávu, když byl zcela dokončen přechod vyblednutí tooltipu.

Reklama

.