tooltip和title美化网站提示教程-酷库博客

浏览器自带的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也是放到公用css文件里面