JS和jQuery实现个性化标题title属性中漂亮的tooltip气泡提示美化框

话不多说,直接放代码

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

ition: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;}

默认效果

修改之后效果

jQuery方式控制

 //个性title提示<i></i>样式
 $(function() {
    $("a").each(function(b) {//这里是控制标签
        if (this.title) {
            var c = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示
            var a = 30; //设置提示框相对于偏移位置,防止遮挡鼠标
            $(this).mouseover(function(d) { //鼠标移上事件
                this.title = "";
                $("body").append('&lt;div id="<i></i>tooltip"&gt;' + c + "&lt;/div&gt;"); //创建提示框,添加到页面中
                $("#tooltip").css({
                    left: (d.pageX + a) + "px",
                    top: d.pageY + "px",
                    opacity: "0.8"
                }).show(250) //设置提示框的坐标,并显示
            }).mouseout(function() { //鼠标移出事件
                this.title = c; //重新设置title
                $("#tooltip").remove() //移除弹出框
            }).mousemove(function(d) { //跟随鼠标移动事件
                $("#tooltip").css({
                    left: (d.pageX + a) + "px",
                    top: d.pageY + "px"
                })
            })
        }
    })
 });

CSS

/* 个性title提示样式 */
#tooltip{background:#DDD;color:#000000;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #666;border:1px dashed #FFF;padding:3px 8px;font-size:12px;}

示例

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">

  <title>Document</title>
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
  <script type="text/javascript">
    //个性title提示样式
    $(function() {
        $("a").each(function(b) {//这里是控制标签
            if (this.title) {
                var c = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示
                var a = 30; //设置提示框相对于偏移位置,防止遮挡鼠标
                $(this).mouseover(function(d) { //鼠标移上事件
                    this.title = "";
                    $("body").append('<div id="tooltip">' + c + "</div>"); //创建提示框,添加到页面中
                    $("#tooltip").css({
                        left: (d.pageX + a) + "px",
                        top: d.pageY + "px",
                        opacity: "0.8"
                    }).show(250) //设置提示框的坐标,并显示
                }).mouseout(function() { //鼠标移出事件
                    this.title = c; //重新设置title
                    $("#tooltip").remove() //移除弹出框
                }).mousemove(function(d) { //跟随鼠标移动事件
                    $("#tooltip").css({
                        left: (d.pageX + a) + "px",
                        top: d.pageY + "px"
                    })
                })
            }
        })
    });
  </script>
  <style type="text/css">
    /* 个性title提示样式 */
    #tooltip{background:#DDD;color:#000000;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #666;border:1px dashed #FFF;padding:3px 8px;font-size:12px;}
  </style>
 </head>
 <body style="padding: 30px;">
    
    <a href="#" title="鼠标放这里">Hello World</a>
 </body>
</html>

赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏