layui鼠标悬停提示语

小小的梦想！

已于 2023-02-16 09:55:37 修改

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： javascript 前端 html

于 2023-02-15 14:47:47 首次发布

本文链接：https://blog.csdn.net/weixin_42402845/article/details/129043326

layui 专栏收录该内容

1 篇文章

订阅专栏

文章展示了如何在项目中利用layui的tips方法创建鼠标悬停时的提示效果。通过添加特定类名和data-tip属性到元素，结合JavaScript事件监听(mouseenter和mouseleave)，动态显示和关闭提示框，自定义提示内容、样式、最大宽度及背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：项目需要鼠标移入文本或者按钮时候悬停提示，因此可以使用layui的tips方法,代码如下：

<a class="layui-btn layui-bg-gray layui-btn-xs textTip" data-tip="删除文本提示语">删除</a>

var curTipIndex = '';
$(".textTip".on("mouseenter", function () {
          var content = $(this).attr("data-tip");
          curTipIndex = layer.tips(
            '<div style="padding: 5px; font-size: 16px; color: #5ee;">' +
            content +
            "</div>",
            this,
            {
              time: -1,
              maxWidth: 280,
              tips: [3, "#883D49"],
            }
          );
        }).on("mouseleave", function () {
          layer.close(curTipIndex);
        });