GeekPark/gpk_account

.tooltip-wrapper {
  position: relative;

  .tooltip-message {
    position: absolute;
    display: inline-block;
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    -webkit-user-select: none;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .2);
    opacity: 0;

    &::before {
      content: '';
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      border: 8px solid transparent;
    }

    &.status-error {
      background-color: $color-red;
      color: #fff;

      &::before {
        border-top-color: $color-red;
      }
    }
  }

  &.direction-top {
    .tooltip-message {
      left: 0;
      top: -45px;

      &::before {
        border-color: transparent;
        left: 15px;
        bottom: -16px;
        border-top-color: $color-red;
      }
    }
  }

  &.direction-right {
    .tooltip-message {
      right: 0;
      top: 50%;
      margin-top: -15px;

      &::before {
        top: 50%;
        transform: translateY(-50%);
        border-color: transparent;
        left: -15px;
        border-right-color: $color-red;
      }
    }
  }
}