Просмотр файла js/tooltips.js

// Используем немедленно выполняемый функцтор для безопасного применения $
(function( $ ) {

  // Создаем плагин
  $.fn.tooltips = function(el) {

    var $tooltip,
      $body = $('body'),
      $el;

    // Убеждаемся, что цепочка работает
    return this.each(function(i, el) {
    
      $el = $(el).attr("data-tooltip", i);

      // Создаем DIV и добавляем его на страницу
      var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo("body");

      // Позиционируем сначала на месте элемента
      var linkPosition = $el.position();

      $tooltip.css({
        top: linkPosition.top - $tooltip.outerHeight() - 13,
        left: linkPosition.left - ($tooltip.width()/2)
      });

      $el
      // Выкидываем желтый прямоугольник
      .removeAttr("title")

      // Курсор мыши наводится на объект
      .hover(function() {

        $el = $(this);

        $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']');

        // Переставляем подсказку в случае движения страницы, например, при изменении размера
        var linkPosition = $el.position();

        $tooltip.css({
          top: linkPosition.top - $tooltip.outerHeight() - 13,
          left: linkPosition.left - ($tooltip.width()/2)
        });

        // Добавляем класс для анимации через CSS 
        $tooltip.addClass("active");

        // Курсор мыши покидает объект
      }, function() {

        $el = $(this);

        // Временный класс для скрытия подсказки
        $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']').addClass("out");

        // Удаляем все классы
        setTimeout(function() {
          $tooltip.removeClass("active").removeClass("out");
          }, 300);

        });

      });

    }

})(jQuery);