颖想家

Layui原生的layer.tips在这里不做表述，本文内容是layui使用jquery.tooltip.js来实现悬停提示。

因为layui.js里面已经包含了jquery，所以在使用的页面不需要再引入jquery库。

button的使用方法如下：

<button class="layui-btn layui-btn-sm layui-btn-danger" data-toggle="tooltip" title="删除" ><i class="layui-icon">&#xe640;</i></button>

a标签的使用方法基本跟button的一样，具体如下：

<a href="lesson/3.html" class="layui-btn layui-btn-sm" data-toggle="tooltip" title="" data-original-title="信息">信息</a>

页面引用layui.js与jquery.tooltip.js的代码如下：

<script  type = "text/javascript" src="/static/layui/layui.js"></script>

<script  type = "text/javascript" src="/static/layui/layui.all.js"></script>

<script  type = "text/javascript">

    var $ = jQuery = layui.$;

    layui.use('element', function(){

        var element = layui.element;

    });

    $(function(){

        $('[rel=tooltip]').tooltip({container: 'body'});

        $('[data-toggle="tooltip"]').tooltip();

    });

</script>

<script src="/static/js/jquery.toolTip.js"></script>

引用layui.js与jquery.tooltip.js的顺序不能有错，否则会报错。

我这里是让悬停提示在上方显示，修改了jquery.toolTip.js文件的第136行，具体修改如下：

tp = {top: pos.top - actualHeight - 6, left: pos.left + pos.width / 2 - actualWidth / 2}

主要是悬停提示的位置问题，如果你的提示的位置不同，修改对应的就可以了。

然后再修改layui/css/layui.css，增加以下内容：

.tooltip {

    position: absolute;

    z-index: 1070;

    display: block;

    font-size: 12px;

    line-height: 1.4;

    visibility: visible;

    filter: alpha(opacity=0);

    opacity: 0

}

.tooltip.in {

    filter: alpha(opacity=90);

    opacity: .9

}

.tooltip.top {

    padding: 5px 0;

    margin-top: -3px

}

.tooltip.right {

    padding: 0 5px;

    margin-left: 3px

}

.tooltip.bottom {

    padding: 5px 0;

    margin-top: 3px

}

.tooltip.left {

    padding: 0 5px;

    margin-left: -3px

}

.tooltip-inner {

    max-width: 200px;

    padding: 3px 8px;

    color: #fff;

    text-align: center;

    text-decoration: none;

    background-color: #000;

    border-radius: 4px

}

.tooltip-arrow {

    position: absolute;

    width: 0;

    height: 0;

    border-color: transparent;

    border-style: solid

}

.tooltip.top .tooltip-arrow {

    bottom: 0;

    left: 50%;

    margin-left: -5px;

    border-width: 5px 5px 0;

    border-top-color: #000

}

.tooltip.top-left .tooltip-arrow {

    bottom: 0;

    left: 5px;

    border-width: 5px 5px 0;

    border-top-color: #000

}

.tooltip.top-right .tooltip-arrow {

    right: 5px;

    bottom: 0;

    border-width: 5px 5px 0;

    border-top-color: #000

}

.tooltip.right .tooltip-arrow {

    top: 50%;

    left: 0;

    margin-top: -5px;

    border-width: 5px 5px 5px 0;

    border-right-color: #000

}

.tooltip.left .tooltip-arrow {

    top: 50%;

    right: 0;

    margin-top: -5px;

    border-width: 5px 0 5px 5px;

    border-left-color: #000

}

.tooltip.bottom .tooltip-arrow {

    top: 0;

    left: 50%;

    margin-left: -5px;

    border-width: 0 5px 5px;

    border-bottom-color: #000

}

.tooltip.bottom-left .tooltip-arrow {

    top: 0;

    left: 5px;

    border-width: 0 5px 5px;

    border-bottom-color: #000

}

.tooltip.bottom-right .tooltip-arrow {

    top: 0;

    right: 5px;

    border-width: 0 5px 5px;

    border-bottom-color: #000

}

如果你的页面会有多个button并排排列在一起，则需要将layui/css/layui.css文件的.layui-btn + .layui-btn值修改一下，否则会导致右边的button向左边移动，具体修改内容为：

.layui-btn + .layui-btn {

    margin-left: 0px

}

这样就实现了在layui里使用jquery.tooltip.js实现悬停提示的效果。