css写tooltip提示框

版权声明：本文为博主原创文章，未经博主允许不得转载。
实现效果为：
html为：

<div class="bottom">
        <p>最近很忙</p>
    </div>

css为：

.bottom {
       min-height: 40px;
       position: relative;
       display: table;
       text-align: center;
       border-radius: 7px;
       background-color: #9EEA6A;
       text-align: center;
       display: table;
       margin: 0;
       position: relative;
       border: 1px solid #ccc;
   }
   .bottom::before,
   .bottom::after {
       position: absolute;
       content: "";
       display: inline-block;
       width: 0;
       height: 0;
       border: 8px solid transparent;
       /* top: 11px; */
   }
   .bottom::before {
       bottom: -16px;
       border-top: 8px solid #9EEA6A;
   }
   .bottom::after {
       bottom: -17px;
       border-top: 8px solid #ccc;
       z-index: -1;
   }