<code>(function($) {
    $.fn.colorTip = function(settings) {
        var defaultSettings = {
            color: 'black',
            timeout: 0
        }
        var supportedColors = ['red', 'green', 'blue', 'white', 'yellow', 'black'];
        settings = $.extend(defaultSettings, settings);
        return this.each(function() {
            var elem = $(this);
            if (!elem.attr('title')) return true;
            var scheduleEvent = new eventScheduler();
            var tip = new Tip(elem.attr('title'));
            elem.append(tip.generate()).addClass('colorTipContainer');
            var hasClass = false;
            for (var i = 0; i < supportedColors.length; i++) {
                if (elem.hasClass(supportedColors[i])) {
                    hasClass = true;
                    break;
                }
            }
            if (!hasClass) {
                elem.addClass(settings.color);
            }
            elem.hover(function() {
                tip.show();
                scheduleEvent.clear();
            },
            function() {
                scheduleEvent.set(function() {
                    tip.hide();
                },
                settings.timeout);
            });
            elem.removeAttr('title');
        });
    }
    function eventScheduler() {}
    eventScheduler.prototype = {
        set: function(func, timeout) {
            this.timer = setTimeout(func, timeout);
        },
        clear: function() {
            clearTimeout(this.timer);
        }
    }
    function Tip(txt) {
        this.content = txt;
        this.shown = false;
    }
    Tip.prototype = {
        generate: function() {
            return this.tip || (this.tip = $('<span class="colorTip">' + this.content + '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
        },
        show: function() {
            if (this.shown) return;
            this.tip.css('margin-left', -this.tip.outerWidth() / 2).show(100);
            this.shown = true;
        },
        hide: function() {
            this.tip.hide();
            this.shown = false;
        }
    }
})(jQuery); 
</code>

<code>
.colorTipContainer{position:relative;text-decoration:none !important;}
.colorTip{display:none;position:absolute;left:50%;top:-35px;padding:6px;background-color:white;font-size:11px;font-style:normal;line-height:1;text-decoration:none;text-align:center;text-shadow:0 0 1px white;white-space:nowrap;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.pointyTip,.pointyTipShadow{border:6px solid transparent;bottom:-12px;height:0;left:50%;margin-left:-6px;position:absolute;width:0;}
.pointyTipShadow{border-width:7px;bottom:-14px;margin-left:-7px;}
.black .pointyTip{ border-top-color:#333;} .black .pointyTipShadow{ border-top-color:#111;} .black .colorTip{background-color:#333;border:1px solid #111;color:#fcfcfc;text-shadow:none; }

.blue .pointyTip{ border-top-color:#e6edef;} .blue .pointyTipShadow{ border-top-color:#587686;} .blue .colorTip{background-color:#e6edef;border:1px solid #587686;color:#1b475a;}

</code>

<code>    
jQuery(document).ready(function($) {
$('.box a,.box2 a').colorTip({
color: 'blue'
});
});
</code>