jquery实现个性标题(title)(Tag)气泡提示美化框

jq代码：

jQuery(document).ready(function($) {
    var sweetTitles = {
        x: 10,
        y: 20,
        tipElements: "a,span,img,div ",
        noTitle: false,
        init: function() {
            var noTitle = this.noTitle;
            $(this.tipElements).each(function() {
                $(this).mouseover(function(e) {
                    if (noTitle) {
                        isTitle = true;
                    } else {
                        isTitle = $.trim(this.title) != '';
                    }
                    if (isTitle) {
                        this.myTitle = this.title;
                        this.title = "";
                        var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";
                        $('body').append(tooltip);
                        $('.tooltip').css({
                            "top": (e.pageY + 40) + "px",
                            "left": (e.pageX - -5) + "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 - 5) + "px"
                    });
                });
            });
        }
    };
    $(function() {
        sweetTitles.init();
    });
});

CSS样式：（建议添到CSS尾端） 

/*提示框*/
.tooltip{font-size:12px;font-family:5b8b4f53;line-height:1.5;text-align:center;padding:6px 0;position:absolute;display:none}
.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:6px dashed #000;top:0;left:10%;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent}
.tipsy-inner{background-color:#000;color:#fff;max-width:200px;padding:4px 8px 4px 8px;text-align:center;border-radius:5px}

文章转载于wrz博客.