Universal tips on jQuery

Good day, dear readers. I want to present to your look my little plugin implemented on jQuery. The plugin is designed to universalize the creation of tooltips.
Previously, I found many codes to solve problems with hints and errors in validation, but they were all heavy and not very universal. This led to the fact that I started developing my own plug-in bypassing the existing ones.
The main task was to make it so that the output of the hints could be controlled, but without getting into the JS code itself.
The second task was to shove so much functionality into the code that the hints could be displayed both left / right / bottom / top and stuck to the mouse cursor.
The third task (why was it ever implemented on JS) was the centering of the tooltip, relative to the induced object.

Layout turned out to be simple:

<div class="tooltip-wrapper"> <input type="text" class="field"> <div class="valid-message valid-message-js">   </div> </div> 

As can be seen from the code, we have a tooltip-wrapper block, which combines the tooltip with the element on which the tooltip will be called.
Its styles are also extremely simple:

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

Next we have an object (in our example input.field) and the message itself valid-massege. I try to distinguish between classes that I use in styles and scripts, because of this we have two valid-massege and valid-massege-js.
With mandatory styles at the tooltip only position: absolute.
Now let's look at the script itself, which should satisfy our requirements:

 (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); 

Now let me try to explain what is what.
The plugin will be called by name (tooltip) and only one parameter will be passed to it - this is a block with a hint.

 $('.valid-massege-js').tooltip(); //      -js 

By default, the plugin will display a hint from the right edge of the text, as it has been specified in the parameters - tooltipSide: "right"
This value can be changed to any of the four possible (top / right / bottom / left) and transmit it along with the call to the plugin:

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

In the HTML code itself, when the side is replaced, the class indicating the side will change (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; } 

Also in the plugin there is the possibility of attaching a tooltip to the cursor while it is above the area. By default, this feature is disabled, but you can easily enable it:

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

And finally, for the plugin to work, you will need the jQuery library itself and the jquery.actual library. But do not worry, jquery.actual in compressed form takes 1 KB. And on a big project, it may come in handy for other scenarios, as it closes the main bug with .width () and .height () for hidden items. We can find it here .
View demo