美化演示：

教程简介

浏览器自带的alt和title提示太丑了，所以我们需要美化一下，百度有许多，不过对我们这些小白来说很难。

第一步

放以下js到公用js里面

var sweetTitles = {x: 10,y: 20,tipElements: "a,span,img,div ",noTitle: false,init: function() {var b = this.noTitle;$(this.tipElements).each(function() {$(this).mouseover(function(e) {if (b) {isTitle = true} else {isTitle = $.trim(this.title) != ''}if (isTitle) {this.myTitle = this.title;this.title = "";var a = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";$('body').append(a);$('.tooltip').css({"top": (e.pageY + 20) + "px","left": (e.pageX - 20) + "px"}).show('fast')}}).mouseout(function() {if (this.myTitle != null) {this.title = this.myTitle;$('.tooltip').remove()}}).mousemove(function(e) {$('.tooltip').css({"top": (e.pageY + 20) + "px","left": (e.pageX - 20) + "px"})})})}};$(function() {sweetTitles.init()});

第二步

css也是

/*tips*/.tooltip {font-size:12px;position:absolute;padding:5px;z-index:100000;opacity:.8;font-family:Microsoft Yahei}.tipsy-arrow {position:absolute;width:0;height:0;line-height:0;border:6px dashed #000;top:0;left:20%;margin-left:-5px;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent}.tipsy-arrow-n {border-bottom-color:#666}.tipsy-inner {background-color:#666;color:#FFF;max-width:200px;padding:5px 8px 4px 8px;text-align:center;border-radius:3px}