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

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:

Vypadá ve finále takto:

{tip Text tooltipu zobrazený v bublině}slovo nad kterým chcete tooltip zobrazit{/tip}

Tooltip s obrázkem

Vypadá takto:

{tip image="images/logo.png" image_height="65" image_width="245"}text tooltipu{/tip}

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

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.