<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-在css中绘制三角形-提示框(popover)组件</title>
    <style>
        .pop-wrapper {
            padding: 16px 10px;
            margin : 70px 0 0 20px;
            background-color: #02bdda;
            border-radius: 6px;
            color: #e3fbff;
            width: 200px;
            position: relative;
            text-align: center;
        }
        .popover {
            background-color: rgba(0, 0, 0, 0.85);
            border-radius: 5px;
            bottom: 64px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
            color: #fff;
            display: none;
            font-size: 12px;
            left: 0;
            padding: 7px 10px;
            position: absolute;
            width: 200px;
            z-index: 4;
        }
        .popover:before {
            border-top: 7px solid rgba(0, 0, 0, 0.85);
            border-right: 7px solid transparent;
            border-left: 7px solid transparent;
            bottom: -7px;
            content: '';
            display: block;
            left: 50%;
            margin-left: -7px;
            position: absolute;
        }
        .pop-wrapper:hover .popover {
            display: block;
        }
    </style>
</head>
<body>
<div class="pop-wrapper">顶部提示框 <span class="popover">简单是稳定的前提。</span></div>
</body>
</html>