Vytvorme si tooltip plugin

Najskôr si pripojíme na odkaz s class tooltip udalosť <a href="/dokumentacia/mouseenter">mouseenter</a>, tá sa aktivuje akonáhle sa myš dostane nad nami zvolený element pri inicializácii.

$('a.tooltip')
   .bind('mouseover', function(e)
   {
      tooltext = $(this).attr('title');
      $(this).removeAttr('title');

      tooltip_timer = setTimeout(function()
      {
         $('
')
            .hide()
            .appendTo('body');
         $("#tooltip")
            .text(tooltext)
            .css('position', 'absolute')
            .css({
               top: e.pageY + nastavenia.yOffset,
               left: e.pageX + nastavenia.xOffset
            })
            .show();
      }, nastavenia.delay);
   })

Ako môžeme vidieť uložíme si title nášho odkazu pod premennú tooltext. Potom odkazu odstránime title, to z dôvodu aby sa nám nezobrazil pôvodný systémová bublina. Vytvoríme si časovač a priradíme mu čas za koľko sa ma funkcia v ňom vykonať. Vo funkcií už vidime, že sa vytvorí náš tooltip, ktorý sa hneď skryje, pridá do body, vloží sa text z premennej tooltext, nastaví sa position na absolute, nastavia sa súradnice a nakoniec sa tooltip zobrazí.

Teraz keď už máme mouseenter pripojme si teraz <a href="/dokumentacia/mousemove">mousemove</a>, čo nám vylepší náš tooltip aby bublina nasledovala kurzor.

.bind('mousemove', function(e)
{
   $('#tooltip')
      .css({
         top: e.pageY + nastavenia.yOffset,
         left: e.pageX + nastavenia.xOffset
      });
})

Ako vidíte, nerobí to nič iné ako to, že pri pohnutí myšou nad našim objektom zmení polohu tooltipu.

Aby bol náš tooltip kompletný musíme pridať ešte <a href="/dokumentacia/mouseout">mouseout</a>, ktorý nám pri opustení nášho odkazu po sebe pozametal.

.bind('mouseout', function()
{
   $('#tooltip').remove();
   clearTimeout(tooltip_timer);
   $(this).attr('title', tooltext);
});

Odstráni náš tooltip, vyčistí časovač a nakoniec späť pridá atribút title aby sa proces mohol opakovať.

Aby sme ale z nášho kódu mali plugin musíme to celé zaobaliť a pridáme aj nejaké preddefinované nastavenia. Celý náš tooltip plugin bude vo finále vyzerať takto:

(function($)
{
   $.fn.tooltip = function(nastavenia)
   {
      var predvolene =
      {
         delay: 1500,
         xOffset: 15,
         yOffset: 15
      };
      var nastavenia = $.extend(predvolene, nastavenia);
      var tooltext = '';
      return this.each(function()
      {
         object = $(this);
         var tooltip_timer;
         object
            .bind('mouseover', function(e)
            {
               tooltext = $(this).attr('title');
               $(this).removeAttr('title');
               
               tooltip_timer = setTimeout(function()
               {
                  $('
')
                     .hide()
                     .appendTo('body');
                  $("#tooltip")
                     .text(tooltext)
                     .css('position', 'absolute')
                     .css({
                        top: e.pageY + nastavenia.yOffset,
                        left: e.pageX + nastavenia.xOffset
                     })
                     .show();
               }, nastavenia.delay);
            })
            .bind('mousemove', function(e)
            {
               $('#tooltip')
                  .css({
                     top: e.pageY + nastavenia.yOffset,
                     left: e.pageX + nastavenia.xOffset
                  });
            })
            .bind('mouseout', function()
            {
               $('#tooltip').remove();
               clearTimeout(tooltip_timer);
               $(this).attr('title', tooltext);
            });
      });
   }
})(jQuery);

Zaobalenie so sebou prinieslo aj jemné modifikácie nášho skoršieho kódu. Napríklad object = $(this); nám uloží náš objekt. Pre ďalšie modifikácie ohľadom zapúzdrenia do pluginu odporúčam prečítať skôr napísaný návod Vytvorte si svoj prvý jQuery plugin.

A inicializácia bude vyzerať takto:

$(document).ready(function()
{
   $('a.tooltip').tooltip();
});

Alebo ak chceme pozmeniť niektoré nastavenia tak:

$(document).ready(function()
{
   $('a.tooltip').tooltip(
   {
      delay: 500,
      xOffset: 15
   });
});

Nakoniec ešte vytvoríme CSS súbor kde si zvolíme vzhľad, v ukážke sme zvolili niečo takéto:

a.tooltip
{
   cursor: help;
}

#tooltip
{
   background-color: #FFFFFF;
   border: 3px solid #FF0000;
   padding: 2px 4px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

Nakoniec, vyskúšajte ukážku ako to vo finále vyzerá. Základnú kostru teda máte, takže môžete si kedykoľvek vytvoriť niečo zložitejšie.

Tagy: tooltip plugin