自定义鼠标移动提示框

拼搏现实的明天。 2023-07-07 05:49 4阅读 0赞

背景： 有一个界面元素，当鼠标移动到上面后，动态的显示提示信息。

$("#labelId").mouseover(function (e) {
                var leftwidth = getToolTipLeftWidth(e.pageX);
                var message = "自定义的提示信息，这里可以当做参数传递进来";
                $("body").append("<div id='tooltip' class='tooltip'>" + message  + "</div>");//将要显示的内容添加到 新建 div标签中 并追加到 body 中
                $("#tooltip")
                    .css({
                        //设置 div 内容位置
                        "top": (e.pageY + 10) + "px",
                        "position": "absolute",//添加绝对位置
                        // "left": (e.pageX + 20) + "px"
                        "left": leftwidth + "px"
                        // "width": "100px",
                        // 'height':"80px"
                    }).show("fast");// show(spe.ed,callback) speed: xian'shi'su'du
            }).mouseout(function () { //鼠标指针从 a标签 上离开时 发生mouseout 事件
                // this.title = this.Mytitle;
                $("#tooltip").remove();//移除对象
            }).mousemove(function (e) { //鼠标指针在 a标签 中移动时 发生mouseout 事件
                var leftwidth = getToolTipLeftWidth(e.pageX);
                var message = "自定义的提示信息，这里可以当做参数传递进来";
                $("#tooltip")
                    .css({
                        //设置 div 内容位置
                        "top": (e.pageY + 10) + "px",
                        "position": "absolute",//添加绝对位置
                        "left": leftwidth + "px"
                    });
            });
    
    
    /**
     * 计算提示框距离左侧的宽度
     */
    function getToolTipLeftWidth(x){
        var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var leftwidth = x+20;
        if(windowWidth - x < 200){
            leftwidth = x - 100;
        }
        return leftwidth;
    }