layui使用tips鼠标悬停提示语的实例代码

2024-08-02实例代码

258

layui使用tips鼠标悬停提示语的实例代码，具体代码如下，有三种方式：

<!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>

The End

layui后台布局实例代码

layui后台布局的实例代码，以下是详细代码： !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlelayout 后台大布局 - Layui/title link rel="stylesheet" ...

2025-10-15 实例代码

可自动切换的tab实例代码

可自动切换的tab实例代码，html代码如下： !-- tab标签代码begin --div class="tab1" id="tab1" div class="menu" ul li id="one1" onclick="setTab('one',1)"新闻/li li id="one2" onclick="setTab('one',2)"活动/li li id="one3" onclick="setTab('one',3)"...

2025-09-16 实例代码

114

php数据处理：数组根据某字段进行分组

php数据处理：数组根据某字段进行分组，实例代码如下： /** * @description:根据数据 * @param {dataArr:需要分组的数据；keyStr:分组依据} * @return: */ protected function dataGroup(array $dataArr,string $keyStr) :array { $newArr=[]; foreach ($data...

2025-06-12 实例代码

188

LayUI登录页面页设计实例

实例代码如下： !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" link rel="stylesheet" href="layui/css/layui.css" style type="text/css" .container{ width: 420px; height: 320px; min-height: 320px; max-height: 320px; position: absolute; t...

2025-04-13 实例代码

234

MUI Picker Input设置默认时间回显实例代码

MUI Picker Input设置默认时间回显实例代码 mui('body').on('tap', '#begTime', function () { //日期选择 var dtPicker = new mui.DtPicker({ type: 'date' }); /*参数：'datetime'-完整日期视图(年月日时分) 'date'--年视图(年月日) 'time' --时间视图(时分...

2025-01-09 实例代码

139

layui实现带清除按钮的输入框

layui实现带清除按钮的输入框，首先html文件如下： !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" title测试 - layui/title link rel="stylesheet" href="layui/css/lay...

2024-12-31 实例代码

200

相关推荐

layui后台布局实例代码

可自动切换的tab实例代码

php数据处理：数组根据某字段进行分组

LayUI登录页面页设计实例

MUI Picker Input设置默认时间回显实例代码

layui实现带清除按钮的输入框

热门文章

热门精品源码

最新VIP资源