twTooltip.js

(function ($) {

    var defaultOptions = {
        'direction': 'top',
        'width': 100,
        'html': '',
        'offset': 10

    }
    $.fn.twTooltip = function (options) {
        var settings, offsetX, offsetY, offsetStartX, offsetStartY, tooltip, startCss, animateCss, posFix, mt = 0, mr = 0, mb = 0, ml = 0;

        if ( !! options && typeof options != 'object') options = {
            'html': options
        };
        settings = !! options ? $.extend({}, defaultOptions, options) : defaultOptions;

        posFix = $(this).css('position');
        if (posFix != 'fixed' || posFix != 'absolute' || posFix != 'relative') $(this).css('position', 'relative');

        if ($(this).is('input')) {
            $(this).wrap('<div class="tw-wrap"></div>');
            $(this).parent().append('<div class="tw-tooltip tw-' + settings.direction + '-direction">' + settings.html + '</div>');
            tooltip = $(this).next();
            mt = parseInt($(this).css('margin-top'));
            mr = parseInt($(this).css('margin-right'));
            mb = parseInt($(this).css('margin-bottom'));
            ml = parseInt($(this).css('margin-left'));

        } else {
            $(this).append('<div class="tw-tooltip tw-' + settings.direction + '-direction">' + settings.html + '</div>');
            tooltip = $('.tw-tooltip', this);
        }

        tooltip.on('mouseenter mouseleave', function () {
            return false;
        });

        switch (settings.direction) {
        case 'top':
            offsetStartX = ($(this).outerWidth() - settings.width) / 2;
            offsetX = offsetStartX;
            offsetY = -(tooltip.outerHeight() + settings.offset) - mt;
            offsetStartY = offsetY - 20;
            break;
        case 'bottom':
            offsetStartX = ($(this).outerWidth() - settings.width) / 2;
            offsetX = offsetStartX;
            offsetY = $(this).outerHeight() + settings.offset + mb;
            offsetStartY = offsetY + 20;
            break;
        case 'left':
            offsetX = -(settings.width + settings.offset) - ml;
            offsetStartX = offsetX - 20;
            offsetStartY = ($(this).outerHeight() - tooltip.outerHeight()) / 2;
            offsetY = offsetStartY;
            break;
        case 'right':
            offsetX = $(this).outerWidth() + settings.offset + mr;
            offsetStartX = offsetX + 20;
            offsetStartY = ($(this).outerHeight() - tooltip.outerHeight()) / 2;
            offsetY = offsetStartY;
            break;
        }


        startCss = {
            'display': 'block',
            'opacity': 0,
            'left': offsetStartX,
            'top': offsetStartY,
            'width': settings.width
        }
        animateCss = {
            'top': offsetY,
            'left': offsetX,
            'opacity': 1
        }




        function tooltipShow() {
            tooltip.css(startCss).animate(animateCss, {
                'queue': false,
                'duration': 100
            });
        }

        function tooltipHide() {
            tooltip.animate(startCss, {
                'queue': false,
                'duration': 100,
                'complete': function () {
                    $(this).css('display', 'none');
                }
            });
        }

        $(this).mouseover(function () {
            tooltipShow();
        }).mouseout(function () {
            tooltipHide();
        });
    }

    $('[data-tw-tooltip]').each(function () {
        $(this).twTooltip($(this).data('tw-tooltip'));
    });
})(jQuery);