1.实现效果
2.代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layui.tip使用</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.8.0-rc.9/css/layui.css">
</head>
<style type="text/css">
.layui-bg-blue {
background-color: #ffffff!important;
color: #2a82e4!important;
}
.layui-bg-gray {
background-color: #f5f5f5!important;
}
</style>
<body>
<a name="xmzy"></a>
<div class="content" style="width:1420px;height: 1000px;background-color: #f2f2f4">
<div class="text" style="width:97%;height: 1800px;margin-left: 20px;margin-bottom:13px;border-radius: 5px; background-color:#ffffff;">
<div style="padding:20px" >
<blockquote class="layui-elem-quote" >信息</blockquote>
<table class="layui-table">
<colgroup>
<col width="50">
<col width="250">
<col>
</colgroup>
<tbody>
<tr>
<td style="background-color:#f2f2f2;" >项目单位</td>
<td >
<a href="javascript:;" id = "zbdw" onmouseenter="mouseenter()" style="color: #2a82e4;text-decoration:underline;">xxxx有限公司
</a>
</td>
</tr>
<tr>
<td style="background-color:#f2f2f2;">中标金额</td>
<td>98万</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script src="https://www.layuicdn.com/layui-v2.8.0-rc.9/layui.js" > </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use(['element', 'layer'], function () {
let element = layui.element;
let layer = layui.layer;
});
//显示描述
function mouseenter(){
let html="";
html+="<div class='card' style='border-radius: 5px;background-color: #fff;width: 550px;height: 250px;color:#202020'>";
html+="<div class='card-header' style='height:30%;border-bottom:1.5px solid #e8e8e8;padding: 5px;'>";
html+="<div class='card-header-title' style='margin-left:20px;margin-top: 10px;margin-bottom: 10px; font-size: 16px;'>xxxx有限公司</div>";
html+="<span class='layui-badge layui-bg-blue' style='margin-left:20px;border: solid #0567b2 0.5px;'>存续</span>";
html+="<span class='layui-badge layui-bg-gray' style='margin-left:20px;'>个体工商户</span></div>";
html+="<div class='card-content' style='text-align:center;padding: 20px;height:25%;'>";
html+="<div style='float: left;width: 33%;border-right:1.5px solid #e8e8e8;'>";
html+="<p style='font-weight:bold;font-size: 16px;margin-bottom: 5px;color: #2a82e4;'>395个</p> <p>项目数量</p></div>";
html+="<div style='float: left;width: 33%;border-right:1.5px solid #e8e8e8;'>";
html+="<p style='font-weight:bold;font-size: 16px;margin-bottom: 5px;color: #2a82e4;'>132.22万元</p><p>项目金额</p></div>";
html+="<div style='float: left;width: 33%;'>";
html+="<p style='font-weight:bold;font-size: 16px;margin-bottom: 5px;color: #2a82e4;'>--</p><p>历史联系人</p></div></div>";
html+="<div style='height:30%;text-align:center;'><a href='http://layui.uimaker.com/doc/modules/layer.html' class='layui-btn layui-btn-primary layui-border-blue' style='border-radius: 5px;' >查看详情</a></div></div>";
layer.tips(html, '#zbdw',{tips: [3,'#fff'],time: 9999,area: ['570px', '260px']});
};
</script>
</html>