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.以上就是本期的全部内容，希望这篇文章能帮到你^_^！