layui使用tips鼠标悬停提示语

版块：AIGC 类型：普通作者：AI绘图查看：65 回复：0 获赞：0 时间：2023-10-31 09:52:35

tips层的使用方法：首先引入文件layer.css和layer.js文件；然后使用代码格式为“layer.tips(msg, '#id',{tips: 1}，time:10000)”；最后设置相关参数即可。

方法一

<hr>
    <a href="javascript:;" id="id1" onmouseover="show('测试6666','id1')" onmouseleave="close_tips()">6666</a>
    <hr>

<!-- 方法一 -->
<script>
    // tips 鼠标划过提示
    function show(msg, id) {
        layer.tips('' + msg, '#' + id, { tips: [2, 'black'] });
    }
    function close_tips() {
        layer.closeAll('tips');
    } 
</script>

方法二

<div class="content" id="content">
        <label for="">这是一个提示：</label>
        <span class="iconfont icon-combined-shape-copy tooltip-icon liu_tips">请把鼠标上上面</span>
    </div>


<!-- 方法二 -->
<script>
    $(function () {
        var tips;
        $(".icon-combined-shape-copy").on({
            mouseenter: function () {
                var that = this;
                tips = layer.tips("<span style='color:#000;'>说明：你可以看到了吧，哈哈哈</span>", that, { tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500 });
            },
            mouseleave: function () {
                layer.close(tips);
            }
        });
    })
    // 多个提示显示

    $(".icon-combined-shape-copy01").on({
        mouseenter: function () {
            tips = layer.tips("<span style='color:#000;'>略略略略略</span>", "#id1", { tips: [3, '#ddd'], time: 0, area: 'auto', maxWidth: 500, tipsMore: true });
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });
    $(".icon-combined-shape-copy02").on({
        mouseenter: function () {
            tips = layer.tips("<span style='color:#000;'>嘻嘻嘻嘻嘻嘻</span>", "#id2", { tips: [3, '#ddd'], time: 0, area: 'auto', maxWidth: 500, tipsMore: true });
        },
        mouseleave: function () {
            layer.close(tips);
        }
    }); 
</script>

方法三

<div style="margin-top: 10px;">
        <input type="text" id="tips" class="tips" placeholder="请点击这里面" />
    </div>
<!-- 方法三 -->
<script>
    $('.tips').on('click', function () {
        layer.tips('请输入用户名', '#tips', {
            tips: [3, '#0FA6D8'], //设置tips方向和颜色 类型：Number/Array，默认：2 tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']
            tipsMore: false, //是否允许多个tips 类型：Boolean，默认：false 允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
            time: 2000  //2秒后销毁，还有其他的基础参数可以设置。。。。这里就不添加了
        });
    });
</script>

全部代码如下：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>测试-liu 劉</title>
</head>
<script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel=" stylesheet" type="text/css" href="./layui/css/layui.css">
<script>

</script>

<body style="padding: 50px;">
    <blockquote class="layui-elem-quote">注意： </blockquote>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>方法一</legend>
    </fieldset>
    <br>
    <hr>
    <a href="javascript:;" id="id1" onmouseover="show('测试6666','id1')" onmouseleave="close_tips()">6666</a>
    <hr>
    <br>
    <span type="text" id="id2" onmouseover='show(`<div><span style="color: chartreuse">测试2-22</span></div>`, "id2")'
        onmouseleave="close_tips()">测试2</span>
    <br>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>方法二</legend>
    </fieldset>

    <div class="content" id="content">
        <label for="">这是一个提示：</label>
        <span class="iconfont icon-combined-shape-copy tooltip-icon liu_tips">请把鼠标上上面</span>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>方法三</legend>
    </fieldset>
    <div style="margin-top: 10px;">
        <input type="text" id="tips" class="tips" placeholder="请点击这里面" />
    </div>
</body>
<!-- 方法一 -->
<script>
    // tips 鼠标划过提示
    function show(msg, id) {
        layer.tips('' + msg, '#' + id, { tips: [2, 'black'] });
    }
    function close_tips() {
        layer.closeAll('tips');
    } 
</script>
<!-- 方法二 -->
<script>
    $(function () {
        var tips;
        $(".icon-combined-shape-copy").on({
            mouseenter: function () {
                var that = this;
                tips = layer.tips("<span style='color:#000;'>说明：你可以看到了吧，哈哈哈</span>", that, { tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500 });
            },
            mouseleave: function () {
                layer.close(tips);
            }
        });
    })
    // 多个提示显示

    $(".icon-combined-shape-copy01").on({
        mouseenter: function () {
            tips = layer.tips("<span style='color:#000;'>略略略略略</span>", "#id1", { tips: [3, '#ddd'], time: 0, area: 'auto', maxWidth: 500, tipsMore: true });
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });
    $(".icon-combined-shape-copy02").on({
        mouseenter: function () {
            tips = layer.tips("<span style='color:#000;'>嘻嘻嘻嘻嘻嘻</span>", "#id2", { tips: [3, '#ddd'], time: 0, area: 'auto', maxWidth: 500, tipsMore: true });
        },
        mouseleave: function () {
            layer.close(tips);
        }
    }); 
</script>
<!-- 方法三 -->
<script>
    $('.tips').on('click', function () {
        layer.tips('请输入用户名', '#tips', {
            tips: [3, '#0FA6D8'], //设置tips方向和颜色 类型：Number/Array，默认：2 tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']
            tipsMore: false, //是否允许多个tips 类型：Boolean，默认：false 允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
            time: 2000  //2秒后销毁，还有其他的基础参数可以设置。。。。这里就不添加了
        });
    });
</script>

</html>

回复列表

默认热门正序倒序

首 1 尾

暂无用户组

退出

等级：0级

金币：

游客：

后台控制面板

微信扫码

QQ扫码