.tooltip {
  position: relative;
  display: inline-block;

  .tooltip__left, .tooltip__right, .tooltip__top, .tooltip__bottom {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
  
    &.tooltip__left {
      top: -5px;
      right: 110%;

      &::after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent black;
      }
    }
  
    &.tooltip__right {
      top: -5px;
      left: 110%;

      &::after {
        content: " ";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent;
      }
    }
  
    &.tooltip__bottom {
      top: 150%;
      left: 50%;
      margin-left: -60px;

      &::after {
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent;
      }
    }
  
    &.tooltip__top {
      bottom: 150%;
      left: 50%;
      margin-left: -60px;

      &::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
      }
    }
  }
  
  &:hover .tooltip__left,
  &:hover .tooltip__right,
  &:hover .tooltip__top,
  &:hover .tooltip__bottom {
    visibility: visible;
  }
}