Layer插件库的tooltips组件弹窗内容自适应换行

1.又是风和日丽的一天，今天测试小哥突然向我反馈，XXX地方的鼠标悬浮冒泡样式不太对，具体情况如下:

2.这里之前是通过html标签内的“title”属性来实现，使用举例如下：

<div class="title_box" title="我是这个标签的具体描述信息，可能会很长很长">我是简短信息</div>

3.然后我去网上找了一圈，也没找到修改这个气泡样式的方法，然后听同事说这个项目引入了layer插件库，里面有个tooltips组件，可以替代title属性，具体用法如下，如果会用的可以跳过不用看这条：

// 标题鼠标悬浮事件，显示标题全文
$('.redactRecord .title').hover(function(){// 获取完整文本内容(主楼;负一楼;楼层走廊公区;次级走廊公区东面;杂物间1.....)let title = $(this).data('title_room');// 显示提示框layer.tips(title, this, {tips: [3, '#FFF'], // 弹层位置 1-4上右下左， 背景颜色anim: false, // 禁用动画});
}, function(){// 隐藏提示框layer.closeAll('tips');
});

/* 修改tooltip组件中文字改为黑色*/
.layui-layer-tips .layui-layer-content {color: #333;
}

效果如下：

4.大功告成，下班！那是不可能滴，此时测试小哥说最好再优化一下，以逗号为分隔符，每行显示只显示一条数据，就像下面这样（其实原话是每行显示30字，但我想了下他想要的效果应该是美观地显示）

5.具体实现思路：我想过给弹层固定宽度，但这样遇到只有三个字的地点名气泡会变得很长很长，没有自适应宽度的效果，换行也会因为字数不一而乱七八糟。然后我查到有个area属性，可以自适应宽高，那么我只需给每个逗号后面添加换行符即可，思路就写这么多，直接贴代码吧：

只需要在js部分添加两行代码（红色框），然后css部分添加一行代码（蓝色框）

具体代码效果：

6.源码如下：

// 标题鼠标悬浮事件，显示标题全文
$('.redactRecord .title').hover(function(){// 获取完整文本内容let title = $(this).data('title_room');// 遇到逗号就换行显示title = title.replace(/,/g, ',\n'); // 显示提示框layer.tips(title, this, {tips: [3, '#FFF'], // 弹层位置 1-4上右下左， 背景颜色area: ['auto', 'auto'], // 自适应宽高anim: false, // 禁用动画});
}, function(){// 隐藏提示框layer.closeAll('tips');
});

/* 修改tooltip组件中文字的颜色、逗号换行*/
.layui-layer-tips .layui-layer-content {color: #333;white-space: pre-wrap;
}

7.以上就是本期的全部内容，希望这篇文章能帮到你^_^！

Layer插件库的tooltips组件弹窗内容自适应换行相关推荐

uniapp图片自适应_uni-app下input组件基于内容自适应宽度的实现
1.需求设计图是'单价'编辑项是input,随输入内容自己改变,前后有而fix(如果单位'￥/片'放后面那就好做多了):但是uni-app的input组件是有自定宽度的,而且试了好多css都很难控制 ...
WEB前后端交互原型通用元件库、常用组件、信息输出、信息输入、信息反馈、综合系列、页面交互、首页、分类页、内容详情、用户中心、注册登录、找回密码、元件库、web元件库、rplib、axure
WEB前后端交互原型通用元件库.常用组件.信息输出.信息输入.信息反馈.综合系列.页面交互.首页.分类页.内容详情.用户中心.注册登录.找回密码.元件库.web元件库.rplib.axure原型 we ...
页面显示问题用layer插件
layer是一款近年来备受青睐的web弹层组件,这得益于她全方位的解决方案,并致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验.她尽可能地在以更少的代码展现更强健的功能,且格外注 ...
Vue插件库汇总，收藏学习！
前言这是github上由OpenDigg整理并维护的Vue相关开源项目库集合,写进博客里方便自己学习时查找. 原文:https://github.com/opendigg/awesome-githu ...
史上最全的vue插件库
无意间发现的一个整合内容,超级强大,赶紧记录下来!原文链接内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2 ...
包含Demo示例，包含实列，vue插件汇总，vue组件大全，
目录一.UI组件及框架二.滚动scroll组件三.slider组件四.编辑器五.图表六.日历七.地址选择八.地图九.播放器十.文件上传十一.图片处理十二.提示十三.进度条十 ...
60+ 个前端常用插件库合集
60+ 个前端常用插件库合集目录 60+ 个前端常用插件库合集 DataTables LazyLoad lightSlider alertify.js pickadate.js-日期/时间选择器 c ...
坯子库无法一键安装插件没用_坯子插件库下载-坯子插件库电脑版下载v2020.1-IE浏览器中文网站...
坯子插件库是一款专为sketchup设计的插件管理工具,可以精准的对您的插件列表进行检查.分析异常插件,此外为您提供了丰富多样的插件.胚子工具等,有效的提高您的使用效果. 软件特点 1.对一些元件直接 ...
VUE 2.0 插件库
VUE 2.0 插件库 – https://blog.csdn.net/hjh15827475896/article/details/78207066 UI组件 element - 饿了么出品的Vue ...

Layer插件库的tooltips组件弹窗内容自适应换行

Layer插件库的tooltips组件弹窗内容自适应换行相关推荐

最新文章

热门文章