Create tip message through title attribute, custom data atribute or none of these(cache message).

tip.js

//demo: http://jsfiddle.net/AbraaoAlves/W7j4z/18/

//use this:
//$("input:first").tip();
//$("[data-tip]").tip({tipMsgAttr: 'data-tip'});
//$("p").tip('custom message');

(function($){
    
    var $defaults = {
        tipMsgAttr : 'title',
        tip : $("<span class='tip'>").css({
                background : '#000', color: '#fff', padding: '5px',
            display: 'none', position: 'absolute'
            }).append($("<div>").css({
                'border-color': 'transparent transparent #000 transparent ',
                'border-style': 'solid', 'border-width': '12px 8px',                             height:'0px', width: '0px', position: 'absolute',                           bottom:'26px'
            }))
    };
    
    $.fn.tip = function(options) {
        options = (typeof options === 'string')? {tipMsg: options} : options;
        var params = $.extend($defaults, options );
        
        return this.each(function() {
            
            var msg = (params.tipMsg) ? 
               $(this).data("tip", params.tipMsg).data("tip") :
               $(this).attr(params.tipMsgAttr);
            
            var tip = params.tip.clone();
            tip.prepend(msg).appendTo('body');
            tip.css({
               top :$(this).offset().top + 30, 
               left:$(this).offset().left + 5 });

            $(this).hover(
                function() { tip.show();},     
                function() { tip.hide();});
        });  
    };
    
})(jQuery);