气泡

image.png

<div class="box tip-a">
  <a href="javascript:;" data-tooltip="提示提示提示">点击</a>
</div>

.tip-a a {
      border-bottom:1px solid #bbb;
      color:#666;
      display:block;
      position:relative;
      text-decoration:none;
      width: 100px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      background-color: purple;
      color: #ffffff;
    }
    .tip-a a:hover,
    .tip-a a:focus {
      color:#36c;}
    .tip-a a:active {
      top:1px;
    }
    /* Tooltip styling */
    .tip-a a[data-tooltip]:after {
      border-top: 8px solid #222;
      border-top: 8px solid hsla(0,0%,0%,.85);
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      content: "";
      display: none;
      height: 0;
      width: 0;
      left: 25%;
      position: absolute;
    }
    .tip-a a[data-tooltip]:before {
      background: #222;
      background: hsla(0,0%,0%,.85);
      color: #f6f6f6;
      content: attr(data-tooltip);
      display: none;
      font-family: sans-serif;
      font-size: 14px;
      height: 32px;
      left: 0;
      line-height: 32px;
      padding: 0 15px;
      position: absolute;
      text-shadow: 0 1px 1px hsla(0,0%,0%,1);
      white-space: nowrap;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
    }
    .tip-a a[data-tooltip]:hover:after {
      display: block;
      top: -9px;
    }
    .tip-a a[data-tooltip]:hover:before {
      display: block;
      top: -41px;
    }
    .tip-a a[data-tooltip]:active:after {
      top: -10px;
    }
    .tip-a a[data-tooltip]:active:before {
      top: -42px;
    }