layui显示元素的title属性

0 38 2024-07-01 06:00:02

本文目录

1. html元素
2. jQuery+layer.js
3. 参数解读

html自带了title标签，鼠标上移后自动显示，但比较小，而且难看，我们可以使用layer.js进行美化。

html元素

<span data-title="这里是要显示的文字1"></span>
<span data-title="这里是要显示的文字2"></span>
<span data-title="这里是要显示的文字3"></span>

jQuery+layer.js

$(document).on('mouseover', 'span', function () {
    var text = $(this).data("title");
    if(text){
        layerTipIndex = layer.tips(text, $(this), {
            tips: [1, '#333'],
            time: 0,
            position:'bottom',
        });
    }
});

$(document).on('mouseout', 'span', function () {
    layer.close(layerTipIndex);
});

参数解读

layer.tips(
    content,// 渲染的dom元素，可以是字符串文本，也可以是dom标签，本文的方法是自动获取data-title属性，更为灵活多变
    elem,// 吸附的元素，也就是你需要在哪个元素的周围展示气泡，用jQuery获取即可，可传元素，可用自身，可固定
    options，// 配置选项，类型为对象，可传入多个属性
);

这样，就实现了layer.js显示title属性，ui更为美观，体验也更好。

本文地址：https://xzo.com.cn/develop/js/1348.html

有帮助，很赞！

信息来源：下载鸥

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

layui

layui使用ajax提交时怎样让required生效？ layui自带的搜索功能lay-search介绍 layui获取下拉框的值并赋值给指定的input和p元素 layui表单的name、title属性都有什么用？ layui从数据库获取下拉框数据 layui显示元素的title属性

导出教程下载word版教程

关于JS/JQuery

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。