Bublinková nápověda

Bublinkovou nápovědu můžete použít téměř na cokoliv. V kódu je na to připravena funkce showTooltip() s různými možnostmi nastavení. Pro snadné použití je připravena css třída .hlp, která musí být použita v kombinaci s atributem title, ve které se skrývá obsah nápovědy. Ta se pak zobrazí při kliknutí na prvek. V editoru TinyMCE se nachází třídy nápověd ve klasicky stylech.

Nejčastější použítí bublinkové nápovědy

Použité na:	Styl [CSS třída]	Ukázka
Tlačítko	Nápověda [.hlp]	Tlačítko Více informací
Obyčejný odkaz	Nápověda (s ikonou otazníku ) [.hlp .hlp-ico]	Odkaz
Obrázek (kliknutí / po najetí)	Nápověda [.hlp] / Nápověda (po najetí myši) [.hlp .hlp-hover]
Text v odstavci	Nápověda (s ikonou otazníku ) [.hlp .hlp-ico] Nápověda [.hlp]	Lorem Ipsum je výplňový text ... Lorem Ipsum je výplňový text ...
Najetí na text	Nápověda (po najetí myši) [.hlp .hlp-hover]	Lorem Ipsum je výplňový text ...

Využití nápovědy na formuláře

Možnosti použití nápovědy

Zjednodušená metoda pro rychlé používání (třída v kombinaci s atributem title)

• .hlp - základní třída pro aktivaci nápovědy (povinná)
• .hlp-ico - třída přidá ikonku otazníku za prvek
• .help-hover - nápověda se zobrazí po najetí na prvek

Postup: označíte např. obrázek (s nastaveným titulkem) a ve volbě stylů vyberete položku nápověda

Složitější metoda JS - funkce showTooltip()

Parametry:

• selektor - .třída, #id
• text - text, který se zobrazí v nápovědě
• pozice šipky - na které straně se zobrazí šipka od obsahu nápovědy (základně: center left - na levé straně, uprostřed)
• pozice bubliny od prvku - na které straně prvku se zobrazí nápověda (základně: center right - na pravé straně, uprostřed)
• událost pro zobrazení - možnosti click, mouseenter, focus ... (základně: click)
• událost pro schování - click, unfocus, mouseleave, ... (základně click, unfocus)
• zobrazení po načtení stránky - false, true (základně false)
• zobrazení pouze jedné bubliny - false, true (základně true)

Př: showTooltip("#obrazek", "Popisek obrázku", 'bottom left', 'top right', 'mouseenter', 'mouseleave', false, true);