首先引用文件

 rel="stylesheet" href="css/start_v5.css" /> 
 type="text/javascript" src="js/jquery.min.js"> 
 type="text/javascript" src="js/plugin/jquery.tipsy.js?v=20140326"> 
 type="text/javascript" src="js/page/start_v5.js?v=20140326">

像这样的在先客服大家也见了不少，也应该了解，不多说了核心代码：

function fixTitle($ele) { 
        if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') { 
            $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title'); 
        } 
    } 
     
    function Tipsy(element, options) { 
        this.$element = $(element); 
        this.options = options; 
        this.enabled = true; 
        fixTitle(this.$element); 
    } 
     
    Tipsy.prototype = { 
        show: function() { 
            var title = this.getTitle(); 
            if (title && this.enabled) { 
                var $tip = this.tip(); 
                 
                $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title); 
                $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity 
                $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); 
                 
                var pos = $.extend({}, this.$element.offset(), { 
                    width: this.$element[0].offsetWidth, 
                    height: this.$element[0].offsetHeight 
                }); 
                 
                var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight; 
                var gravity = (typeof this.options.gravity == 'function') 
                                ? this.options.gravity.call(this.$element[0]) 
                                : this.options.gravity; 
                 
                var tp; 
                switch (gravity.charAt(0)) { 
                    case 'n': 
                        tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; 
                        break; 
                    case 's': 
                        tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; 
                        break; 
                    case 'e': 
                        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}; 
                        break; 
                    case 'w': 
                        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}; 
                        break; 
                } 
                 
                if (gravity.length == 2) { 
                    if (gravity.charAt(1) == 'w') { 
                        tp.left = pos.left + pos.width / 2 - 15; 
                    } else { 
                        tp.left = pos.left + pos.width / 2 - actualWidth + 15; 
                    } 
                } 
                 
                $tip.css(tp).addClass('tipsy-' + gravity); 
                 
                if (this.options.fade) { 
                    $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity}); 
                } else { 
                    $tip.css({visibility: 'visible', opacity: this.options.opacity}); 
                } 
            } 
        },