layer.tips 提示显示，随笔

 css：

        .help-button {
            display: inline-block;
            height: 20px;
            width: 20px;
            line-height: 20px;
            text-align: center;
            padding: 0;
            background-color: #65bcda;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            cursor: default;
            margin-left: 4px;
            border-radius: 100%;
            border-color: #fff;
            border: 2px solid #fff;
            -webkit-box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.2);
        }

 html:

  ?

jquery:  layer.tips 具体说明文档，请去官网查看

layui.use(['layer'],function(){
           var layer = layui.layer;
                //展示 提示信息
            var layerTips = function (obj, cl) {
                var tip_index;
                var msg = $(obj).attr('data-content');
                var title = $(obj).attr('data-original-title');
                var titleHtml = (title != null) ? "
" + title + "
 " : "";
                var showHtml = "
" + titleHtml + "" + msg + "
";
                if (!cl) {
                    tip_index = layer.tips(showHtml, obj, {
                        tipsMore: true,
                        time: 0,
                        tips: [2, '#ffffff'],
                        area: ['400px', 'auto'],
                        skin: 'layui-layer-rim'
                    });
                } else {
                    layer.closeAll();
                }
            }
            $(document).on('mouseenter', '.help-button', function () {
                layerTips(this);
            }).on('mouseleave', '.help-button', function () {
                layerTips(this, 1);
            });
});

效果图：