使用jquery对html默认的title进行美化，仿tooltip

　　我们经常会用到鼠标移入显示全部信息功能，很多人会用bootstrap的tooltip.js插件，但如果不是bootstrap框架，要在项目里引入整个bs框架过于臃肿，其他独立的tooltip插件大部分兼容性不好，代码工坊小编采用html属性中的title字段进行美化来实现tooltip的效果，并且可以跟随鼠标自由移动，实现较好的移入弹出效果，同时具有边缘碰撞躲避功能。

      注：使用此代码前需要先引入jquery。

代码内容：

(function(a){a.fn.jcTitle=function(b){var c={background:"#f7eebf",color:"#393939",opacity:"0.8",border:"solid 1px #968212",fontSize:12,position:"absolute",zIndex:9999,textShadow:"none",borderRadius:3,padding:6,follow:true},b=a.extend(c,b);return this.each(function(){var g=a(this),j=b.content||g.attr("title"),e,f,h,d;if(j!=""){var i=a("<div />");g.attr("title","").hover(function(l){e=a(window).width(),f=a(window).height();i.html(j).appendTo("body").hide().css(b).fadeIn(500);h=a("body div").last().outerWidth(),d=a("body div").last().outerHeight();if(b.follow){g.mousemove(function(o){var p=o.pageY+8,n=o.pageX+8;if(p>f+a(document).scrollTop()-d){p=o.pageY-d-8}if(n>e+a(document).scrollLeft()-h){n=o.pageX-8-h}i.css({top:p,left:n})})}else{var m=l.pageY+8,k=l.pageX+8;if(m>f+a(document).scrollTop()-d){m=l.pageY-d-8}if(k>e+a(document).scrollLeft()-h){k=l.pageX-8-h}i.css({top:m,left:k})}i.fadeIn(500)},function(){i.remove()})}})}})(jQuery);

调用方式：

      默认调用：

$('ul li').jcTitle();

      调用不跟随鼠标移动：

$('ul li').jcTitle({follow:false});

      指定样式：

$('('ul li').jcTitle({
    'font-size': 18,
    'border':'solid 3px red'
});

      指定内容：

$('('p').jcTitle({
    content: '直接指定title内容，此时不管title标签有没有内容，都将会被忽略。'
});