DESTOON模板中引入layui组件库使用lay-tips提示的方法

在模板开发中，如果我们使用了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>