jQuery 鼠标指针 悬浮在文字上提示信息

效果图

 

 

css代码

        #div_toop {
            background-color:white;
            padding: 10px;
            border: 1px solid #eeeeee;
            box-shadow: 5px 5px 5px #eeeeee;
        }

            #div_toop .title {
                width: 70px;
                display: inline-block;
                text-align: right;
                margin-right: 10px;
            }

js代码

            //鼠标位于 a标签上方时发生 mouseover 事件
            $(".Price-profit").mouseover(function (e) {

                var price = $(this).data("price");
                var profit = $(this).data("profit");
                var cost = $(this).data("cost");
                var num = $(this).data("num");

                var div_toop = '';
                div_toop += ' <div id="div_toop">';
                div_toop += '<p><span class="title">渠道售价：</span><span style="color: #21C179;">' + price + '(RMB)</span></p>';
                div_toop += '<p><span class="title">渠道售价：</span>按结算价加幅20%</p>';
                div_toop += '<p><span class="title">结算价：</span>' + cost + '(RMB)</p>';
                div_toop += '<p><span class="title">利润：</span>' + profit + '(RMB)</p>';
                div_toop += '<p><span class="title">剩余库存：</span><span style="color: deepskyblue;">' + num + '</span></p>';
                div_toop += '</div>';

                $("body").append(div_toop);//将要显示的内容添加到 新建 div标签中 并追加到 body 中
                $("#div_toop")
                    .css({
                        //设置 div 内容位置 
                        "top": (e.pageY + 10) + "px",
                        "position": "absolute",//添加绝对位置
                        "left": (e.pageX + 20) + "px"
                    }).show("fast");// show(spe.ed,callback) speed: xian'shi'su'du
            }).mouseout(function () { //鼠标指针从 a标签 上离开时 发生mouseout 事件
                $("#div_toop").remove();//移除对象
            }).mousemove(function (e) { //鼠标指针在 a标签 中移动时 发生mouseout 事件
                $("#div_toop")
                    .css({
                        //设置 div 内容位置 
                        "top": (e.pageY + 10) + "px",
                        "position": "absolute",//添加绝对位置
                        "left": (e.pageX + 20) + "px"
                    });
            });