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

木心操作2024-06-01 9:20

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>