(function($) {
    $.fn.tooltip = function(tip, background, color) {
        this.each(function() {
            var element = $(this);
            element.mouseover(function(e) {
                var tooltip = element.find('div.tkn-tooltip');
                if (tooltip.length == 0) {
                    element.append('<div class="tkn-tooltip">' + tip + '</div>');
                    tooltip = element.find('div.tkn-tooltip');
                }
                tooltip.css({background: background, color: color});
                element.mousemove();
                tooltip.fadeIn(500);
            }).mousemove(function(e) {
                var tooltip = element.find('div.tkn-tooltip');
                if (e.pageX + tooltip.outerWidth() + 12 < $(window).width()) {
                    tooltip.css({left: e.pageX + 12});
                } else {
                    tooltip.css({left: e.pageX - tooltip.outerWidth() - 5});
                }
                if (e.pageY + tooltip.outerHeight() + 10 < $(window).height()) {
                    tooltip.css({top: e.pageY + 10});
                } else {
                    tooltip.css({top: e.pageY - 15});
                }
            }).mouseout(function() {
                element.find('div.tkn-tooltip').remove();

            });
        });
        return $(this);
    };
})(jQuery);


