Универсальные подсказки на jQuery

Доброго времени суток уважаемые читатели. Хочу представить вашему взору свой маленький плагин реализованный на jQuery. Плагин призван универсализировать создание всплывающих подсказок (tooltips).
Ранее я находил множество кодов для решения проблем с подсказками и ошибками при валидации, но все они были тяжеловесными и не очень универсальными. Это привело к тому, что я занялся разработкой своего плагина в обход существующим.
Главной задачей, было сделать так, чтобы выводом подсказок можно было управлять, но при этом не лезть в сам JS код.
Второй задачей было впихнуть в код столько функционала, чтобы подсказки могли выводится как слева/справа/снизу/сверху, так и была прилеплена к курсору мыши.
Третей задачей (зачем вообще было реализовывать на JS) было центрирования подсказки, относительно наведенного объекта.

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

<div class="tooltip-wrapper">
    <input type="text" class="field">
    <div class="valid-message valid-message-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-message.tooltip-left{
    right: 100%;
    margin-right: 10px;
}
.valid-message.tooltip-right{
    left: 100%;
    margin-left: 10px;
}
.valid-message.tooltip-top{
    bottom: 100%;
    margin-bottom: 10px;
}
.valid-message.tooltip-bottom{
    top: 100%;
    margin-top: 10px;
}

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

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

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