layui中添加上下文提示弹窗

scimence

已于 2024-07-04 17:08:49 修改

阅读量278

点赞数 2

文章标签： layui 前端 javascript html上下文弹窗

于 2024-07-04 17:07:30 首次发布

本文链接：https://blog.youkuaiyun.com/scimence/article/details/140184450

版权

<p  context-tip="自定义上下文提示信息">段落内容...</p>
<div  context-tip="自定义上下文提示信息">div内容...</div>


// 悬浮提示
$("body").on("mouseenter", "*[context-tip]",  function () {
    var content = $(this).attr('context-tip');
    this.index = layui.layer.tips('<div style="padding: 0px; font-size: 14px; color: #eee;">' + content + '</div>', this, {
        time: -1
        , maxWidth: 280
        , tips: [3, '#3A3D49']
    });
});

$("body").on("mouseleave", "*[context-tip]", function () {
    layui.layer.close(this.index);
});

//$('*[context-tip]').on('mouseenter', function () {
//    var content = $(this).attr('context-tip);
//    this.index = layui.layer.tips('<div style="padding: 0px; font-size: 14px; color: #eee;">' + content + '</div>', this, {
//        time: -1
//        , maxWidth: 280
//        , tips: [3, '#3A3D49']
//    });
//}).on('mouseleave', function () {
//    layui.layer.close(this.index);
//});