Плагин tooltip Jquery

Самый простенький плагин, который заменяет стандартные подсказки вида title="Описание объекта".

Код плагина:
(function( $ ){
    $.fn.tooltip = function(options) {

        options = $.extend({
            class: 'tooltip'

        }, options);

        $(this).each(function (i) {
            $("body").stop(true, true).append("<div class='" + options.class + "' id='" + options.class + i + "'>" + $(this).attr('title') + "</div>");
            var tooltips = $("#" + options.class + i);
            if ($(this).attr("title") != "" && $(this).attr("title") != "undefined") {
                $(this).removeAttr("title").mouseover(function () {
                    tooltips.css({
                        opacity: 0.9,
                        display: "none"
                    }).stop(true, true).fadeIn(300);
                }).mousemove(function (kmouse) {
                    var bw = $("html,body").width();
                    if ((bw / 2) < kmouse.pageX) {
                        tooltips.css({
                            left: kmouse.pageX - 15 - tooltips.width(),
                            top: kmouse.pageY + 15
                        });
                    } else {
                        tooltips.css({
                            left: kmouse.pageX + 15,
                            top: kmouse.pageY + 15
                        });
                    }
                }).mouseout(function () {
                    tooltips.stop(true, true).fadeOut(100);
                });
            }
        });

    };
})(jQuery);

Стили для плагина:
/* Tooltip */
.tooltip{
    background: #23475E;
    font-size: 12px;
    color: #fff;
    padding: 4px 8px;
    max-width: 500px;
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: 99999;
    letter-spacing: 0.5px;
}
.tooltip b{
    color: #ffd0a5;
    font-weight: 600;
}
.tooltip i{
    color: #d8ffa5;
}
.on_off_tooltip{
    font-size: 12px;
    color: #9ba9b3 !important;
}

Вызов плагина:
$("[title]").tooltip();

У плагина есть одно свойство, можно задать подсказкам свой класс, например:
$("[title]").tooltip({
    class: "tooltip_2"
});

Скачать файл: tooltip.zip [660 b] (cкачиваний: 3)  
Автор: Kylaksizov



Отправить

В корзине: 0 шт.

на сумму: 0

Всего: 0

Оформить заказ Очистить корзину