layui中添加上下文提示弹窗功能

2024-08-13 前端开发跟版网

html部分代码： p context-tip="自定义上下文提示信息"段落内容.../pdiv context-tip="自定义上下文提示信息"div内容.../div js代码部分： // 悬浮提示$("body").on("mouseenter", "*[context-tip]", function () { var content = $(this).attr('context-tip'

html部分代码：

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

js代码部分：

// 悬浮提示
$("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);
});

最终实现的效果如下图所示：

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

layui 弹窗

上一篇：layui复选框如何向后台传值接值下一篇：layui table表格中改变某一行的背景颜色

相关文档推荐

layui实现图片上传成功后回显点击放大图片功能

layui实现图片上传成功后回显点击放大图片功能，html代码部分： !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果，最终效果如下图所示：实现代码如下，在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考

我们在用到layui时候，需要点击文本输入框调起弹出选择框并选择内容，这个要怎么操作呢？以下两种方法可以参考： 1、点击名称，弹出信息弹框，选择表格中的某一行，实现效果如下： html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen

Layui treetable复选框联动解决方案

我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢？实现的最终效果如下： 1. 在当前HTML文档checked监听函数中增加以下代码： //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);

Layui中实现开关按钮的效果

按钮代码如下： {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data

layui.open属性打开一个弹出层

核心方法 var index = layer.open({ type : 2, title : title, maxmin : true, offset: '100px', area : [ '600px', '500px' ], content : prefix + url// iframe的url }); layer.full(index); //最小化 type - 基本层类类型：Number，默认：0 layer提供了5

栏目导航

html教程 css教程前端开发 cms教程 seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发 php编程 java编程实例代码 Python编程