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>
相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript