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