在模板开发中，如果我们使用了layui组件库，现在需要优化tips鼠标提示词显示就简单了很多，首先需要引入layui.css和layui.js
效果图
HTML代码
<a href="###" target="_blank" lay-tips="更多">更多</a> <a href="###" target="_blank" lay-tips="更多" lay-tips-position='[1, "#333"]'>更多</a> <a href="###" target="_blank" lay-tips="更多" lay-tips-position='[2, "#333"]'>更多</a> <a href="###" target="_blank" lay-tips="更多" lay-tips-position='[3, "#333"]'>更多</a> <a href="###" target="_blank" lay-tips="更多" lay-tips-position='[4, "#333"]'>更多</a>
其中 lay-tips="更多" 是提示词， lay-tips-position='[1, "#333"]' 是自定义位置和颜色。位置介绍：1：上，2：右，3：下，4：左。默认位置是上方，如果你不需要指定位置，在使用时直接写 lay-tips="更多" 即可。
JS代码
这段js代码放到layui.js的下面才能生效哦！！！
<script type="text/javascript">
layui.use(['layer'], function(){
var layer = layui.layer;
layer.ready(function(){
document.querySelectorAll('[lay-tips]').forEach(function(element){
var tipText = element.getAttribute('lay-tips');
var positionAttr = element.getAttribute('lay-tips-position');
var position = positionAttr ? JSON.parse(positionAttr) : [1, '#333'];
var index;
element.addEventListener('mouseover', function(){
index = layer.tips(tipText, element, {
tips: position
});
});
element.addEventListener('mouseout', function(){
layer.close(index);
});
});
});
});
</script>
