layer.tips 提示显示

海蓝树

于 2022-09-12 14:33:39 发布

阅读量347

点赞数

分类专栏： JavaScript 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/xwnxwn/article/details/126817042

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>


<!-- 引入 layui.css -->
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" /> 
<!-- 引入 layui.js -->
 <script src="https://www.layuicdn.com/layui/layui.js"></script>
 <style>
  .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);
        }
 
 </style>
</head>

<body>
 
 <br>
        <input type="text" placeholder="请输入……" />
 <span  class="help-button" data-rel="popover" data-trigger="hover"
                                                      data-html="true"
                                                  data-placement="right"
                                                  data-content="(1)展示内容XXXXXXXXXXXXXXXXok<br>(2)sdfsdfdsfsdfsdfsdf" 
                                                  data-original-title="">?</span> <span  >adsfasfasfasfasfdsa</span>
 
</body>
 <script>
        $(function(){
 
			
layui.use(['layer'],function(){
           var layers = 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) ? "<div style='color:#2b3d53;font-weight:bold'>" + title + "</div> " : "";
                var showHtml = "<div>" + titleHtml + "<span style='color:#fff'>" + msg + "</span></div>";
                if (!cl) {
                    tip_index = layer.tips(showHtml, obj, {
                        tipsMore: true,
                        time: 0,
                        tips: [2, '#65bcda'],
                        area: ['400px', 'auto'],
                        skin: 'layui-layer-rim'
                    });
                } else {
                    layers.closeAll();
                }
            }
            $(document).on('mouseenter', '.help-button', function () {
                layerTips(this);
            }).on('mouseleave', '.help-button', function () {
                layerTips(this, 1);
            });
});
 
        });
    </script>
 
</html>