layui实现鼠标移入/移出时显示/隐藏tips

layui实现鼠标移入/移出时显示/隐藏tips弹窗

注:其它弹窗亦可按照此方法实现相同效果

鼠标移入 dom 或 tips 区域,显示 tips 弹窗;

鼠标移出 dom 或 tips 区域,隐藏 tips 窗口;

html 复制代码
<div id="box">鼠标移入移出</div>

<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/layui.js"></script>
<script type="text/javascript">
    layui.use('layer', function() {
        const layer = layui.layer;
        let timer_event, layer_tips, tips_show = false
        
        $('#box').on({
            'mouseenter': function () {
                clearTimeout(timer_event)
                if(tips_show) return
                layer_tips = layer.tips(`<p id='tips-box'>tips content</p>`, $(this), {
                    time:0,
                    closeBtn: '1',
                    maxWidth: 200,
                    tips: 3,
                    success: function () {
                        tips_show = true
                        $('.layui-layer-tips .layui-layer-content').css({
                            'padding': '10px',
                            'border': '1px solid #666',
                        })
                        $('#tips-box').on({
                            'mouseenter': function () {
                                clearTimeout(timer_event)
                            },
                            'mouseleave': function () {
                                hideTips()
                            }
                        })
                    }
                }) 
            },
            'mouseleave': function () {
                hideTips()
            }
        })
        
        function hideTips() {
            clearTimeout(timer_event)
            timer_event = setTimeout(()=>{
                layer.close(layer_tips)
                tips_show = false
            }, 200)
        }
    })
</script>
相关推荐
@解忧杂货铺38 分钟前
前端vue如何实现数字框中通过鼠标滚轮上下滚动增减数字
前端·javascript·vue.js
F-2H2 小时前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
武昌库里写JAVA2 小时前
【MySQL】7.0 入门学习(七)——MySQL基本指令:帮助、清除输入、查询等
spring boot·spring·毕业设计·layui·课程设计
gqkmiss3 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247555 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255025 小时前
前端常用算法集合
前端·算法
真的很上进6 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203986 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2346 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1237 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python