【js-jq】自己写的一个鼠标悬浮处文字提醒——自动消失时间，定义多个tips，元素缺失提醒等

直接引用：

mouse_txt("selector", "txt", hide_time);

即可，如： mouse_txt(".div1", "双击该列表头可隐藏该列");

可以根据多个选择器多次引用此函数。如图：

-

// 鼠标悬浮文字提醒
// (选择器（class,id,或其他），描述文字， 消失时间s)
// mouse_txt("selector", "txt", 3000);
//  mouse_txt(".div1", "双击该列表头可隐藏该列", 3000);
function mouse_txt(selector, txt, time) {

    let that_selector = selector; // 需要悬浮提醒的标签的class
    let hover_txt = txt; // 提示文字
    let hide_time = time; // 提示消失时间

    if($( that_selector).length === 0){
        alert("selector='"+ that_selector+"'的标签未发现，请添加该selector", 4000);
        return;
    }

    if (hide_time === ""){
        hide_time = "long"; // 无时间则不消失
    }

    let time_num = 0;

    let e_x = 0; // 鼠标x坐标
    let e_y = 0; // 鼠标y坐标
    $(document).on("mouseenter", that_selector, function (e) {
        // 鼠标x坐标e.pageX
        // 鼠标y坐标e.pageY
        let that = $(this);
        let that_width = that.width();
        let that_height = that.height();
        let w_width = window.innerWidth;
        e_x = e.pageX + 20;
        e_y = e.pageY + 20;

        that.append('<div class="hover-txt-div mouse-hover" style="position: fixed;top: 50px;z-index: 9999000;display: inline-block;background: rgba(0, 0, 0, 0.6);height: 27px;line-height: 27px;padding: 0 10px;font-size: 13px !important; font-weight: 500 !important;border: 1px solid grey;border-radius: 3px;letter-spacing: 1px;color: white;word-wrap: break-word;overflow: hidden;">'+ hover_txt +'</div>');
        // that.css({"position": "relative", "z-index": "9990000"});

        // 处理tip在最右边显示不全的问题
        let tip_width = $(".hover-txt-div").width();
        console.log([e_x, tip_width, w_width]);
        if (tip_width-100 < w_width){
            if (e_x+tip_width > w_width){
                e_x = e_x-tip_width-50;
            }
        }

        $(".hover-txt-div").css({"left": e_x+"px", "top": e_y+"px"});

        if (typeof hide_time === "number") {
            clearTimeout(time_num);
            time_num = setTimeout(function () {
                $(".hover-txt-div").hide(300);
                setTimeout(function () {
                    $(".hover-txt-div").remove();
                },300);
            }, hide_time);
        }

    });

    $(document).on("mouseleave", that_selector, function (e) {
        let that = $(this);
        e_x = 0;
        e_y = 0;

        // that.css({"position": "initial", "z-index": "initial"});
        $(".hover-txt-div").remove();
    });

}

 

-