jQuery plugins - TipTip
júl 16

TipTip

Tooltip plugin

Verzió: 1.3
Kiadás dátuma: 2010/03/23
Fejlesztő: Drew Wilson
Liszensz: MIT, GPL

Bevezető

Az Interneten tömegszámra léteznek már tooltip kiegészítők, még jQuery nyelven is.
Ez is csak egy a sok közül?

Bár működés szempontjából nem égető jellegű szempont, de a legtöbb ilyen plugin-ban az nem tetszik, hogy a kis buborék nem animáltan jelenik meg. Lényegében ez az egyik ok, amiért felkerült ez a plugin a jQuery-plugins.hu-ra.
A másik ok már sokkal nyomósabb: a plugin felismeri a böngésző szegélyét, azaz ha a buborék pl. lefelé megjelenítve (amúgy ez az alapértelmezett) kilógna az ablakból, akkor azt másik irányba jeleníti meg.

Jellemzők

  • testreszabható maximális szélesség
  • testreszabható buborék - elem közti távolság
  • testreszabható, hogy a buborék megjelenítése előtt mennyi idő teljen el
  • testreszabható a megjelenés (fade-in / fade-out) sebessége

Implementálás

CSS

A plugin részét képezi egy már előre elkészített CSS kód, de természetesen ennek módosításával teljesen átszabható a plugin kinézete.

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.tipTip.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $(".myObject").tipTip();
            });
          

Teljes paraméterlista

  • activation: a plugin aktiválása meghatározott eseményre (hover | focus | click)
    (alapértelmezett: hover)
  • keepAlive: igazra állítva a buborék nem tűnik el, csak egy újabb hover esemény után (true | false)
    (alapértelmezett: false)
  • maxWidth: a buborék maximum szélessége (alapértelmezett: '200px')
  • edgeOffset: a buborék és a szülőelem közti távolság - pixel (alapértelmezett: 3)
  • defaultPosition: a buborék pozíciója a szülőelemhez viszonyítva (top | bottom | left | right)
    (alapértelmezett: bottom)
  • delay: a buborék megjelenésének késleltetése - milliszekundum (alapértelmezett: 400)
  • fadeIn: a buborék megjelenésének sebessége (alapértelmezett: 200)
  • fadeOut: a buborék eltűnésének sebessége (alapértelmezett: 200)
  • attribute: az a HTML attribútum, mely megjelenik a buborékban (alapértelmezett: 'title')
  • content: a buborék tartalmának megadása, ha azt nem egy HTML attribútumból szeretnénk nyerni (alapértelmezett: false)
  • enter: tetszőleges függvény hívás, minden egyes esetben, amikor a TipTip elem fölé visszük az egeret
  • exit: tetszőleges függvény hívás, minden egyes esetben, amikor a TipTip elemről elvisszük az egeret