alt和title提示美化，jquery的特效，记录一次美化美化教程
效果图：

教程也很简单，创建一个js和一个css引用到网站即可，这里就不教怎么引用了，很多文章都写过教程

第一步 创建一个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='Xc_title'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='Xc_title_inside'>" + this.myTitle + "</div></div>";
                    $('body').append(a);
                    $('.Xc_title').css({
                        "top": (e.pageY + 20) + "px",
                        "left": (e.pageX - 20) + "px"
                    }).show('fast')
                }
            }).mouseout(function() {
                if (this.myTitle != null) {
                    this.title = this.myTitle;
                    $('.Xc_title').remove()
                }
            }).mousemove(function(e) {
                $('.Xc_title').css({
                    "top": (e.pageY + 20) + "px",
                    "left": (e.pageX - 20) + "px"
                })
            })
        })
    }
};
$(function() {
    sweetTitles.init()
});

第二步 创建一个css文件 把以下内容放进去

.Xc_title{font-size:13px;position:absolute;padding:10px;z-index:100000;opacity:.8;font-family:Microsoft Yahei}
.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:0px dashed #000;top:4px;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent}
.tipsy-arrow-n{border-bottom-color:#232323e0}
.Xc_title_inside{background-color:#000000e3;color:#FFF;max-width:350px;padding:8px 8px 8px 8px;border-radius: 10px;text-align:center;border-radius:5px}