一只特立独行的猪 一只特立独行的🐷
一只特立独行的🐷
  • 主页
  • web开发
  • 博客笔记
  • 软件工具
  • 随笔杂谈
  • 文章归档
  • 影音欣赏
  • 我的资源
  • 关于我
  • wechat_fill

js实现漂亮的tooltip提示

  • 2016-06-24
  • Web开发
  • 评论(0)

话不多说,直接放代码,效果见本站a标签效果:

js代码:
//tooltip
tooltip();
function tooltip() {
    $("a,div,li,h3,h4,img,i").each(function() {
        $("#tooltip").remove();
        if (this.title) {
            var a = this.title;
            $(this).mouseover(function(b) {
                this.title = "";
                $("body").append('<div id="tooltip">' + a + "</div>");
                $("#tooltip").css({
                    left: b.pageX - 15 + "px",
                    top: b.pageY + 30 + "px",
                    opacity: "0.8"
                }).fadeIn(250)
            }).mouseout(function() {
                this.title = a;
                $("#tooltip").remove()
            }).mousemove(function(a) {
                $("#tooltip").css({
                    left: a.pageX - 15 + "px",
                    top: a.pageY + 30 + "px"
                })
            })
        }
    })
}

css样式代码:

#tooltip{position:absolute;z-index:9999;display:none;padding:4px 8px;border:1px solid rgba(255,255,255,0.25);border-radius:3px;background-color:#0c0;color:#fff;text-align:center;font-size:12px;}
#tooltip:before{position:absolute;top:-6px;left:15px;width:0;height:0;border:6px dashed #0c0;border-top:0;color:#fff;content:' ';line-height:0;border-bottom-style:solid;border-left-color:transparent;border-right-color:transparent;}
Powered by Wordpress, Theme by Wing-magic
©2023 一只特立独行的🐷 All rights reserved
陕ICP备15006707号-5