[Из песочницы] Универсальные подсказки на jQuery

Доброго времени суток уважаемые читатели. Хочу представить вашему взору свой маленький плагин реализованный на jQuery. Плагин призван универсализировать создание всплывающих подсказок (tooltips).

Ранее я находил множество кодов для решения проблем с подсказками и ошибками при валидации, но все они были тяжеловесными и не очень универсальными. Это привело к тому, что я занялся разработкой своего плагина в обход существующим.

Главной задачей, было сделать так, чтобы выводом подсказок можно было управлять, но при этом не лезть в сам JS код.

Второй задачей было впихнуть в код столько функционала, чтобы подсказки могли выводится как слева/справа/снизу/сверху, так и была прилеплена к курсору мыши.

Третей задачей (зачем вообще было реализовывать на JS) было центрирования подсказки, относительно наведенного объекта.



Верстка получилась придельный простой:

<div class="tooltip-wrapper">
    <input type="text" class="field">
    <div class="valid-massege valid-massege-js">
        Текст подсказки 
    </div>  
</div>

Как видно из кода, у нас есть блок обвертка tooltip-wrapper, который объединяет подсказку с элементом на которого будет вызываться подсказка.

Стили его также предельно просты:

.tooltip-wrapper{
        position: relative;
        display: inline-block;
}

Далее у нас есть объект (в нашем примере input.field) и само сообщение valid-massege. Я стараюсь разграничивать классы которые использую в стилях и в сценариях, из-за этого у нас их два valid-massege и valid-massege-js.

С обязательных стилей у самого тултипа только position: absolute.

Теперь давайте посмотрим на сам сценарий, который должен удовлетворять наши требования:

(function($){
        tooltip = function() {

                this._init = function(element, options) {

                        var defaults = {
                                tooltipElement: $(element),
                                tooltipSide: "right",
                                fix: false
                        },
                        settings = $.extend(defaults, options); 

                        settings.tooltipElement.each(function(i){

                                if (settings.fix == false) {
                                        var tooltipElementHeight = $(this).actual( "outerHeight", { absolute : true } ),
                                                tooltipWrapperHeight = $(this).parent(".tooltip-wrapper").actual( "outerHeight", { absolute : true } ),
                                                tooltipElementWidth = $(this).actual( "outerWidth", { absolute : true } ),
                                                tooltipWrapperWidth = $(this).parent(".tooltip-wrapper").actual( "outerWidth", { absolute : true } );

                                        if (settings.tooltipSide == "left") {
                                                $(this).addClass('tooltip-left').css({top:-(tooltipElementHeight/2 - tooltipWrapperHeight/2)});
                                        }
                                        else if (settings.tooltipSide == "right"){
                                                $(this).addClass('tooltip-right').css({top:-(tooltipElementHeight/2 - tooltipWrapperHeight/2)});
                                        }
                                        else if (settings.tooltipSide == "top"){
                                                $(this).addClass('tooltip-top').css({left: -((tooltipElementWidth - tooltipWrapperWidth)/2)});
                                        }
                                        else if (settings.tooltipSide == "bottom"){
                                                $(this).addClass('tooltip-bottom').css({left: -((tooltipElementWidth - tooltipWrapperWidth)/2)});                                       
                                        }                                       
                                }
                                else{
                                        $(document).mousemove(function (pos) {
                                                settings.tooltipElement.css({top: pos.clientY+10, left: pos.clientX+10});
                                        });                                             
                                }
                        });                     
                        
                };
        };
        // Launch plugin
        $.fn.tooltip = function( options ){
                return this.each(function(){
                        $( this ).data( "tooltip", new tooltip()._init( this, options ) );
                });
        };
})(jQuery);

Теперь давайте я попробую объяснить, что тут к чему.

Плагин будет вызываться по названию (tooltip) и в него будет передаваться всего один параметр — это блочек с подсказкой.

$('.valid-massege-js').tooltip(); // именно тот класс с приставкой -js

По умолчанию плагин будет выводить подсказку с правого края от текста, так как у него указано в параметрах — tooltipSide: «right»

Это значение можно менять на любое из четырех возможных (top/right/bottom/left) и передавать его вместе с вызовом плагина:

$('.valid-massege-js').tooltip({
    tooltipSide: "bottom"
});

В самом HTML-коде при замене стороны будет меняться класс обозначивающий сторону (tooltip-top/tooltip-right/tooltip-bottom/tooltip-left).

.valid-massege.tooltip-left{
        right: 100%;
        margin-right: 10px;
}
.valid-massege.tooltip-right{
        left: 100%;
        margin-left: 10px;
}
.valid-massege.tooltip-top{
        bottom: 100%;
        margin-bottom: 10px;
}
.valid-massege.tooltip-bottom{
        top: 100%;
        margin-top: 10px;
}

Также в плагине присутствует возможность прикрепления подсказки к курсору, пока он находится над областью. По умолчанию данная возможность отключена, но ее можно легко включить:

$('.valid-massege-js').tooltip({
    fix: true
});

И последнее, для работы плагина вам понадобится сама библиотека jQuery и библиотека jquery.actual. Но не пугайтесь, jquery.actual в сжатом виде занимает 1 кб. И на большом проекте она вам может пригодится и для других сценариев, так как она закрывает главный баг с .width() и .height() у скрытых элементов. Ее мы можем найти здесь.

Посмотреть демо

Также можно увидеть все на github

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.