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>
相关推荐
星语卿17 分钟前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing112528 分钟前
界面规范11-对话框
javascript·vue.js·elementui
roman_日积跬步-终至千里1 小时前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang1 小时前
在Windows上搭建开发环境
前端·后端
littleplayer1 小时前
Redux在iOS中的使用
前端
跟橙姐学代码1 小时前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling5551 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati1 小时前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试
Cache技术分享1 小时前
188. Java 异常 - Java 异常处理规范
前端·后端