直接引用:
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();
});
}
-