<div class="demo">
  <span class="tooltip" data-tooltip="CSS 实现 Tooltip">hover me</span>
</div>

<style>
  .demo {
    text-align: center;
    margin: 20px;
  }

  .demo .tooltip {
    position: relative;
  }

  .demo .tooltip:before {
    visibility: hidden;
  }

  .demo .tooltip:hover:before {
    visibility: visible;
  }

  .demo .tooltip:before {
    position: absolute;
    left: -60px;
    display: block;
    content: attr(data-tooltip);
    font-size: 12px;
    background: #e6e6e6;
    bottom: 15px;
    width: 120px;
    border-radius: 6px;
    z-index: 99;
    text-align: center;
    color: #000;
    transition: opacity 0.25s, transform 0.25s;
    border: 1px solid #409eff;
  }
</style>

原文参考：https://zhuanlan.zhihu.com/p/585933740