MyCrypto/common/components/ui/Tooltip.scss

@import 'common/sass/variables';
@import 'common/sass/mixins';

.Tooltip {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  width: 220px;
  color: color(tooltip-color);
  font-size: $font-size-small;
  font-family: $font-family-sans-serif;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -100%) translateY(-$tooltip-start-distance);
  transition-property: opacity, transform, visibility;
  transition-duration: 100ms, 100ms, 0ms;
  transition-delay: 0ms, 0ms, 100ms;
  z-index: $zindex-tooltip;

  > span {
    display: inline-block;
    background: color(tooltip-bg);
    border-radius: 3px;
    padding: 6px 10px;

    &:after {
      position: absolute;
      content: '';
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 100%);
      @include triangle($tooltip-arrow-size * 2, color(tooltip-bg), down);
    }
  }

  // Sizing, medium is default
  &.is-size-sm {
    width: 200px;
    font-size: $font-size-xs;

    > span {
      padding: 4px 8px;
      border-radius: 2px;

      &:after {
        border-width: $tooltip-arrow-size - 1;
      }
    }
  }

  &.is-size-lg {
    width: 240px;
    font-size: $font-size-base;

    > span {
      padding: 8px 12px;
      border-radius: 4px;

      &:after {
        border-width: $tooltip-arrow-size + 1;
      }
    }
  }

  // Direction, top is default
  &.is-direction-left {
    left: 0;
    top: 50%;
    justify-content: flex-end;
    transform: translate(-100%, -50%) translateX(-$tooltip-start-distance);

    > span:after {
      bottom: 50%;
      right: 0;
      left: auto;
      transform: translate(100%, 50%);
      border-top-color: transparent;
      border-left-color: color(tooltip-bg);
    }
  }

  &.is-direction-right {
    left: auto;
    right: 0;
    top: 50%;
    justify-content: flex-start;
    transform: translate(100%, -50%) translateX($tooltip-start-distance);

    > span:after {
      bottom: 50%;
      left: 0;
      transform: translate(-100%, 50%);
      border-top-color: transparent;
      border-right-color: color(tooltip-bg);
    }
  }

  &.is-direction-bottom {
    top: auto;
    bottom: 0;
    transform: translate(-50%, 100%) translateY($tooltip-start-distance);

    > span:after {
      bottom: auto;
      top: 0;
      transform: translate(-50%, -100%);
      border-top-color: transparent;
      border-bottom-color: color(tooltip-bg);
    }
  }
}