Универсальные подсказки на 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

Автор: Viking_R

Источник