jQuery plugins - CSS Globe Tooltip
okt 01

CSS Globe Tooltip

Egyszerű tooltip plugin

Verzió: nincs adat
Kiadás dátuma: 2008/05/08
Fejlesztő: Alen Grakalic
Liszensz: nincs adat

Bevezető

Ez a plugin kicsit rendhagyó... Rendhagyó, mert nem nevezhető a megszokott értelemben vett plugin-nak: a CSS Globe-on publikálták, mint tutorial-t s valószínűleg ezért nem lett igazi plugin formába öntve. Ez annyit takar, hogy a plugin három különböző esetre biztosít tooltip effektet, azonban mindegyikhez külön js kód tartozik, nem lett az egész egyetlen file-ba gyúrva, hogy aztán paramétereken keresztül lehessen pl. a kívánt típust kiválasztani. Mindazonáltal úgy vélem, hogy ha nem is az első, de a második és harmadik típus miatt érdemes bemutatni.

Az említett típusok:

  • Az első típus a hagyományos tooltip megoldást takarja: tetszőleges szövegre alkalmazható buborék
  • A második típussal egy kisméretű képhez rendelhetünk buborékot, amely gyorstipp szerűen, nagyobb méretben mutatja meg az adott képet
  • A harmadik típus esetén egy link-hez rendelhetjük hozzá a plugin-t, amely előnézeti képet jelenít meg a hivatkozott oldalról (félreértés elkerülése végett: a plugin nem olyan okos, hogy saját maga generálja le az előnézeti képet, az általunk megadott képet fogja gyorstippként megjeleníteni)

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

A három típust egyszerre is használhatjuk, ha mindhárom funkciót szeretnénk alkalmazni:

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.cssglobe.tooltip-1.js"></script>
            <script type="text/javascript" src="js/jquery.cssglobe.tooltip-2.js"></script>
            <script type="text/javascript" src="js/jquery.cssglobe.tooltip-3.js"></script>
          

Használat

Első típus:
Egy link-et kell készítenünk .tooltip osztállyal, ahol a buborékban megjeleníteni kívánt szöveget a link title attribútumában helyezzük el:

            <a href="#" class="tooltip" title="Buborék szövege">Egyszerű szöveg</a>
          

Második típus:
Szintén link-et használnunk, csak itt .preview osztállyal. A link-en belül helyezkedik el a bélyegkép, míg a link a nagyméretű képre hivatkozik. A link title attribútumával címet adhatunk a nagyméretű képnek (opcionális).

            <a href="img1.jpg" class="preview" title="Kép címe">
              <img src="img1-small.jpg" alt="" />
            </a>
          

Harmadik típus:
Ennél a típusnál a .screenshot osztályt használjuk. A link a hivatkozott weboldalra mutat, a képet pedig a rel attribútum tartalmazza. A title szintén megadható, eredménye megegyezik az előző példában látottal.

            Google