Jak vytvořit bublinovou nápovědu na webové stránce

Co je to vlastně bublinová nápověda? Začněme tím, co není. Když v atributu title u nějakého odkazu na webové stránce vyplníte text a posléze na tento odkaz najdete v prohlížeči myší, zobrazí se vám plovoucí nápověda s textem, který odpovídá obsahu atributu title.

Bublinová nápověda po najetí myší nad nějaký prvek na stránce zobrazí, překvapivě, bublinu. Nemusí se přitom jednat o komiksový typ bubliny, grafické provedení může být hranaté, libovolně barevné a tak dále. Bublinové nápovědy však nedocílíte žádným ze standardních atributů v HTML.

Bublinová nápověda pomocí qTip

Vzhledem k tomu, že web, pro který jsem bublinovou nápovědu potřeboval, byl postaven na Drupalu a tedy nabízel rozhraní pro práci s frameworkem jQuery, rozhodl jsem se po chvilce hledání na internetu pro jednoduché řešení v podobě pluginu qTip. Existuje spousta dalších možností, včetně CSS3 nebo jiných kousků s JavaScriptovým kódem, qTip je však dokonale jednoduchý na implementaci.

Jestliže o qTipu píšu jako o jednoduchém řešení, na mysli mám způsob jeho začlenění do webu. Možnosti výstupu jsou však velmi bohaté. V kódu velice snadno ovlivníte, jak má vytvořená bublinová nápověda vypadat, kde se vzhledem k pozici zdrojového prvku objeví, jakou bude mít barvu, nebo co bude jejím obsahem.

Předpokladem pro použití bublinové náovědy qTip jsou knihovny jQuery. Nemáte-li je ve svém webu, stáhněte je z webu jquery.com. Ještě jednou opakuji, že v Drupalu tento problém řešit nemusíte.

Do kódu své stránky vložte následující volání pro jQuery a pro samotný qTip. Cesty ke skriptům samozřejmě upravte podle potřeby.

<script type="text/javascript" src="/projects/qtip/js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="/projects/qtip/js/jquery.qtip-1.0.0.min.js"></script>

Drupalistům doporučuji následující řešení, kdy uloží soubor qTipu do složky s tématem vzhledu jako qtip.js a do souboru template.php vloží následující řádek:

drupal_add_js(drupal_get_path('theme', 'NAZEVTEMATU') . '/qtip.js');

Nyní máte na stránce vše potřebné a zbývá pouze zavolat kód, který se postará o vytvoření bublinové nápovědy. Nejjednodušší, nikoli však jediná možnost, je přetvoření textů z atributu title do bublinové nápovědy. Protože jsem tuto úpravu chtěl provést pouze u některých odkazů, nikoli v rámci celého webu, vytvořil jsem div s class=secondary-links a do stránky pak vložil následující kód:

{syntaxhighlighter brush:php} $(document).ready(function() { $('.secondary-links a[title]').qtip({ style: { name: 'cream', tip: true }, position: { corner: { target: 'topRight', tooltip: 'bottomLeft'} } } ) } ); {/syntaxhighlighter}

Tento kód qTipu sděluje, že má zpracovat element s třídou secondary-links a vzít z něj všechny odkazy a jejich atributy title vložit do bublinové nápovědy. Následně dochází k zavolání jednoho z výchozích stylů vzhledu vytvořené bubliny a k nastavení pozice jejího zobrazení.

V Drupalu jsem výše uvedený kód doplnil na konec volaného souboru qtip.js.

qTip s dalšími úpravami

Naznačené použití je jen jedním z mnoha dalších, které lze pomocí qTipu provést. Na webu tohoto projektu najdete několik demoukázek a návodů, jak výsledných efektů docílit. V zásadě vždycky voláte funkci $("jqueryselector").qtip() a do něj nastavujete parametry pozice, rohů, vzhledu, stylů, nebo dokonce i vlastní CSS. Vaše bublinová nápověda může mít tedy libovolný vzhled.

Navíc, není nutné se omezovat jen na vkládání textů z atributu title. Jednoduchým zavoláním lze do bubliny vložit HTML obsah:

{syntaxhighlighter brush:php} $("jqueryselector").qtip({ content: { url: 'localcontent.html' } }); {/syntaxhighlighter}

Pomůcku qTip považuji za velmi povedený projekt. Bublinová nápověda bez problémů pracuje v Internet Exploreru (zkoušel jsem 7/8), ve Firefoxu, v Opeře, v Google Chrome i v Safari.