SOURCE

<div class="arrow-up"></div>

<div class="tooltip bs-tooltip-top">
  tooltip up
</div>

.bs-tooltip-top{
  margin-top: 1rem;
  position: relative;
  background: #000;
  color: #fff;
  padding: .5rem 1rem;
  display: inline-block;
  border-radius: .25rem;
  &::after{
    position: absolute;
    width: 0;height: 0;
    content: "";
    border-bottom: .5rem solid #000;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-top: none;
    top:-.5rem;
    left: 50%;
    transform: translateX(-50%);
  }
}