<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>提示弹框</title>
<style type="text/css">
*,*::before,*::after{box-sizing:border-box;}
.body{ display: flex; justify-content: center; align-items: center; position: relative; 100%; height: 100vh; border:0px solid red;}
.tooltip { position: relative; background:#999999; padding: 5px 12px; margin: 5px; font-size: 15px; color: #FFF; }
.tooltip:before,
.tooltip:after { position: absolute; content: ''; opacity: 0; transition: all 0.4s ease; }
.tooltip:before { top: -22px; transform: translateY(20px); z-index:2; content: ""; 12px; height: 12px; display: block; background-color: whitesmoke; border-right:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd; }
.tooltip:after { content: attr(data-tooltip); background:whitesmoke; color:#333333; 160px; height: 40px; font-size: 13px; font-weight: 300; top: -54px; left: -90px; padding: 10px; border-radius: 5px; letter-spacing: 1px; transform: translateY(20px); box-shadow: 1px -1px 5px rgba(0,0,0,0.2); border:1px solid #bdbdbd; z-index:-1;}
.tooltip:hover::before,
.tooltip:hover::after { opacity: 1; transform: translateY(-2px); }
.tooltip:hover::before{transform:rotate(45deg); }
</style>
</head>
<body class="body">
<span class="tooltip" data-tooltip="不能发送空白信息">发送</span>
</body>
</html>