问Jquery工具提示绝对定位

EN

.box {
  position: relative;
  width: 200px;
  height: 50px;
  margin-bottom: 70px;
  background-color: blue;
}

.tooltip {
  display: none;
  border: 1px solid black;
  padding: 10px;
  background-color: white;
  position: absolute;
}

/* here are your coordinates */
.box_tooltip_right .tooltip {
  left: calc(100% + 5px);
  top: 0;
}

/* here are your coordinates for bottom tooltip */
.box_tooltip_bottom .tooltip {
  left: 0;
  top: calc(100% + 5px);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.hoverbox:hover .tooltip {
  display: block;
}

<div class="box box_tooltip_bottom">
  
  <div class="hoverbox">
    <div class="tooltip">I am tooltip bottom 1</div>
    Tooltip bottom 1
  </div>

  <div class="hoverbox">
    <div class="tooltip">I am tooltip bottom 2</div>
    Tooltip bottom 2
  </div>

</div>

<div class="box hoverbox box_tooltip_right">
  <div class="tooltip">I am tooltip right</div>
  Tooltip right
</div>