tooltip和title美化网站提示教程

美化演示

教程简介

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

第一步

放以下js到公用js里面

[code=JavaScript]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()
});

[/code]

第二步

css也是

[code=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
}

[/code]