layui鼠标悬停提示语

小小的梦想！

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

阅读量1.5k

点赞数 1

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

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

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

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：项目需要鼠标移入文本或者按钮时候悬停提示，因此可以使用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);
        });