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

Nedávno jsem stál před úkolem doplnit do jednoho z prvků na nově vytvářeném webu tzv. bublinovou nápovědu. Řešení existuje několik, já vsadil na jQuery a možnost automatického vytvoření bubliny z textu v atributu title u příslušných odkazů.
reklama

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.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

návštěvník

Dobrý den, chtěl bych Vás poprosit o trošku podrobnější návod ohledně integrace qtips. Potřeboval bych pro svůj web zapsat nějaký element do stránky přes např. CKeditor a například na odkaz umístit qtips, ale aby vše bylo co nejznazší a  přímo z ckeditor. Nejdřív bych měl podle vašeho návodu umístit odkaz na script do template ale jak zprovoznit qtips a co kam umístit. díky.RK

např. kam umístit tento kod: $(document).ready(function()

2.  {3.    $('.secondary-links a[title]').qtip({ 4.      style: { name: 'cream', tip: true  },5.      position: { corner: { target: 'topRight', tooltip: 'bottomLeft'} } 6.    } )7.  }8.);

Profile picture for user Jan Polzer

Jak to provázat do CKeditoru bohužel netuším, asi zřejmě nějakým modulem, který by v něm udělal speciální tlačítko. Konkrétní postup, kam ten kód vložit, Vám neporadím.

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

Co píší na Interval.cz
@maxiorel na Twitteru

Maxiorel na Twitteru