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 table表格中改变某一行的背景颜色

layui table表格中读取数据后改变某一行的背景颜色，只需要在：done: function(res, curr, count) { 中加入如下代码即可。 for(var i =0;ires.data.length;i++){if(res.data[i].status==0){$(".layui-table tbody tr").eq(i).css("background-color","red")}}

layui复选框如何向后台传值接值

使用layui复选框的时候需要向后台传递值，值的形式为逗号分割的形式。如下图需要选择多个条件。 layui的前端样式代码如下： div class="layui-form-item" label class="layui-form-label"复选框/label div class="layui-input-block" input type="checkbox"

layui实现弹窗下拉搜索选择框功能

layui实现弹窗下拉搜索选择框功能，实现效果如下： html按钮： a class="btn ygyouhui2 btn-xs audit_btn" href="javascript:void(0);" title="通过" data-id="{$row['id']}" 通过/a js代码部分： script // 事件监听 $('.audit_btn').click(function (){ con

layui表单select框同时支持下拉和输入的解决方案

layui表单select框同时支持下拉和输入的解决方案，最终实现效果如下： div class="layui-input-inline"select name="member_depart" lay-verify="required" id="member_depart" lay-filter="member_depart" style="height:10px;" lay-searchoption value=""选

layui动态表格条件if else语句判断的方式

在Layui动态表格中，可以使用JavaScript的if else语句来进行条件判断

layui table展示页表格中加入下拉选择框

layui 展示页表格中加入下拉选择框，最终实现效果图： 1.在初始化表格的列cols中添加： { field: 'paid', sort: true, title: '付款状态', align: "center", templet:function (d) { return 'select name="paid" class="sel_xlk" lay-filter="stateSelect"

栏目导航

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