javascript-页面中鼠标移动或停留均显示提示框

PHP中文网 • 2025年3月8日 03:21:14 • 编程技术 • 阅读 2

鼠标移动到隐藏内容时显示提示框，鼠标停留在提示框时依旧显示。鼠标离开提示框和隐藏内容时提示框消失。

使用时配合table框是固定宽度，将超过宽度的多余信息予以用省略号显示。

将table框CSS设置为

table-layout: fixed;word-break: break-all;

登录后复制

多余的字符显示为省略号：

.hideMore {    width:60px;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}

登录后复制

显示提示框时使用到的方法说明：

1、delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

立即学习“Java免费学习笔记（深入）”；

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

2、setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

登录后复制//表格内多余的seat将被用省略号来显示//鼠标移动到这里将显示提示框提示内容(可以自定义)$!{policy.seat}

javascript代码：  $(function () {var tableShow = null;            var tipShow = null;            var delayTime = 200;             //离开至表格隐藏tip            $("body").delegate("span", "mouseleave", function () {                tipShow = setTimeout(function () {                    $('[data-ui="alert-layer"]').remove()                }, delayTime)            });                    //移动至表格显示tip                    $("body").delegate("span", "mouseover", function () {                        var seat = $(this);                        tableShow = setTimeout(function () {                            showTip(seat)                        }, delayTime)                    });            //在tip上继续显示            $("body").delegate('[data-ui="alert-layer"]', "mouseover", function () {                clearTimeout(tipShow)            });                    //离开tip隐藏                    $("body").delegate('[data-ui="alert-layer"]', "mouseleave", function () {                        tipShow = setTimeout(function () {                            $('[data-ui="alert-layer"]').remove()                        }, delayTime)                    });            //予以显示            function showTip(seat) {                var content = seat.attr("alert-content");                var position = {                    top: seat.offset().top + seat.height(),                    left: seat.offset().left-3,                    index: 9999                };                var content = "
"+content+"";                $('[data-ui="alert-layer"]').length || ($("body").append(content),                        $('[data-ui="alert-layer"]').css(position))            }})

登录后复制

//显示 提示框p的CSS样式.more-seat {        white-space: nowrap;        color: #566c7e;        position: absolute;        z-index: 99999;        background: #f8fcff;        line-height: normal;        border: 1px solid #c3d5e3;        padding: 14px 16px;        cursor: default;        font-family: verdana;    }

登录后复制

使用样例：