tooltip和title美化网站提示教程

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

tooltip和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文件里面

[wm_reply]

/*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
}

[/wm_reply]

 

【雨夜技术资源网】雨夜技术资源网.中国 优质的技术资源服务平台!
下载说明:
1.本站资源均为免费,我们均不提供相关技术服务。
2.如果源码下载地址失效请 联系站长QQ进行补发。
3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!
4.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不完全包含修复bug和完善功能等正面优化或二次开发);本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;
同时本站用户必须明白,【雨夜技术资源网】对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。

本站由 阜康市委网信办 监督与管理,发文切勿违反国家与地方法律法规!

雨夜技术资源网 技术分享 tooltip和title美化网站提示教程 https://xn--ess81t1yd55izyveetrnp.xn--fiqs8s/1721.html

生命是一场幻觉,而你是我的光

常见问题
  • 下载链接失效可以联系站长进行补发哦
查看详情
  • 我们上传的资源均无解压密码,不存在转跳第三方链接进行付费获取解压密码!
查看详情

相关文章

评论
暂无评论
官方运营团队

为您解决烦忧 - 8小时在线

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    文章总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数