Joomla 3: jak přidat do textu tooltip (nápovědu v bublince)

Petra Procházková
Autor: Petra Procházková


Datum: 23 únor 2017

tooltip text

Při tvorbě webových stránek nebo eshopů můžete někdy potřebovat vysvětlit určité použité termíny, nebo např. ukázat obrázkem, jak konkrétní věc či barva vypadá. Obvyklým řešením jsou klasické vložené obrázky  nebo dokonce poznámky pod čarou. Pokud ale chcete dosáhnout maximálního efektu a přitom "šetřit místem", možná vás zaujmou tzv. tooltips - nápovědy v bublině, které znáte třeba z různých aplikací. V tomto článku vám poradím, jak vytvořit tooltips ve webových stránkách v Joomla! nebo dokonce v popiscích produktů v eshopu Virtuemart.

Plugin Tooltips

Vkládat tooltips do článků, modulů s vlastním obsahem nebo popisků kategorií či produktů v eshopu dosáhnete pomocí pluginu Tooltips od Regular Labs. Tento užitečný plugin má verzi ZDARMA a Tooltips professional verzi za 15 EUR, která vedle podpory nabízí i celou řadu funkcí navíc jako je možnost pozicování nápovědy, zobrazení tooltipu po kliknutí (verze zdarma nabízí jen najetí myší) atd.

Plugin lze nainstalovat standardním způsobem přes Rozšíření - Instalovat. Plugin se po instalaci aktivuje automaticky, není třeba jej povolit.

Zde na demo verzi si můžete prohlédnout různé varianty zobrazení tooltipu. Po překliknutí na záložku Syntax pak vidíte přímo příklad, jak takovýto tooltip vytvořit. 

My si v tomto článku ukážeme dva typy tooltipu - klasický tooltip s textem v bublince nad podtrženým textem a tooltip s obrázkem.

Příklady vložení tooltipu

Klasický tooltip s textem

Samotný tooltip vytvoříte vložením následujícího tagu do textu:

tooltip text

Vypadá ve finále takto:

slovo nad kterým chcete tooltip zobrazit

Tooltip s obrázkem

tooltip obrazek

Vypadá takto:

text tooltipu

Příklady využití v jídelníčku na Carrotka.cz:

tooltip s obrazkem

tooltip text

Pokud chcete využívat tento plugin v kategoriích a popiscích produktů v eshopu Virtuemart, je třeba, abyste v nastavení Virtuemartu na záložce Eshop zaškrtli Používat pluginy Joomla.

pouzivat pluginy joomla

Mohlo by vás také zajímat...

Chcete se na něco zeptat?
1000 znaků zbývá
facebook StaWEBnice twitter StaWEBnice YouTube StaWEBnice Google+ StaWEBnice