rc-tipso/lib/Tipso/BaseTipso/base_tipso.css

A tooltip component for react

@import '../../shared/styles/base.css';

:root {
  --triangleWidth: 8px;
  --triangleHeight: 5px;
  --triangleHeightNegative: -5px;
  --offsetTop: 4px;
  --offsetBottom: -4px;
  --offsetLeft: 8px;
  --offsetLeftNegative: -8px;
  --offsetRight: 4px;

  --ratio: 4;
  --speed: .2s;
  --easing: cubic-bezier(.55,0,.1,1);
  --modalContentOpacity: 0;
  --scale: scale(1);
  --scaleActive: scale(1);

  --shadow: 4px 4px 30px 0 rgba(0, 0, 0, 0.2);
  --filter: rgba(0, 0, 0, 0.2) 4px 4px 30px;
}

.tipso-wrapper {
  position: relative;
  display: inline-block;
  composes: baseText;

  &:first-child {
    margin-left: 0 !important;
  }

  &:last-child {
    margin-right: 0 !important;
  }
}

.tipso-container {
  background-color: var(--white);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow);
  filter: drop-shadow(var(--filter));
  padding: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  line-height: 1em;
  min-width: 100px;
  font-size: 12px;
  composes: baseSubText;

  z-index: var(--zIndex0);
  opacity: var(--modalContentOpacity);
  visibility: hidden;
  backface-visibility: hidden;

  transition: all var(--speed) var(--easing);

  &.active {
    z-index: var(--zIndex99);
    visibility: visible;
    opacity: 1;
  }

  &::after {
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
    filter: drop-shadow(var(--filter));
  }

  &::after {
    z-index: var(--zIndex1);
  }
}

.top, .bottom {
  left: 50%;

  &::after {
    left: 50%;
    transform: translateX(-50%);
    border-left: var(--triangleWidth) solid transparent;
    border-right: var(--triangleWidth) solid transparent;
  }
}

.left, .right {
  top: 50%;

  &::after {
    top: 50%;
    transform: translateY(-50%);
    border-top: calc(var(--triangleHeight) + 2px) solid transparent;
    border-bottom: calc(var(--triangleHeight) + 2px) solid transparent;
  }
}

.top {
  bottom: calc(100% + var(--offsetTop) * var(--ratio));
  transform: var(--scale) translate(-50%, var(--offsetTop));

  &::after {
    bottom: var(--triangleHeightNegative);
  }

  &.dark {
    &::after {
      border-top: var(--triangleHeight) solid var(--gray-dark-deep);
    }
  }

  &.light {
    &::after {
      border-top: var(--triangleHeight) solid var(--white);
    }
  }

  &.active {
    bottom: 100%;
    transform: var(--scaleActive) translate(-50%, var(--offsetTop));
  }
}

.bottom {
  top: calc(100% + var(--offsetTop) * var(--ratio));
  transform: var(--scale) translate(-50%, var(--offsetBottom));

  &::after {
    top: var(--triangleHeightNegative);
  }

  &.dark {
    &::after {
      border-bottom: var(--triangleHeight) solid var(--gray-dark-deep);
    }
  }

  &.light {
    &::after {
      border-bottom: var(--triangleHeight) solid var(--white);
    }
  }

  &.active {
    top: 100%;
    transform: var(--scaleActive) translate(-50%, var(--offsetBottom));
  }
}

.left {
  right: calc(100% + var(--offsetLeft) * var(--ratio));
  transform: var(--scale) translate(var(--offsetLeftNegative), -50%);

  &::after {
    right: var(--triangleHeightNegative);
  }

  &.dark {
    &::after {
      border-left: var(--triangleWidth) solid var(--gray-dark-deep);
    }
  }

  &.light {
    &::after {
      border-left: var(--triangleWidth) solid var(--white);
    }
  }

  &.active {
    right: 100%;
    transform: var(--scaleActive) translate(var(--offsetLeftNegative), -50%);
  }
}

.right {
  left: calc(100% + var(--offsetLeft) * var(--ratio));
  transform: var(--scale) translate(var(--offsetRight), -50%);

  &::after {
    left: var(--triangleHeightNegative);
  }

  &.dark {
    &::after {
      border-right: var(--triangleWidth) solid var(--gray-dark-deep);
    }
  }

  &.light {
    &::after {
      border-right: var(--triangleWidth) solid var(--white);
    }
  }

  &.active {
    left: 100%;
    transform: var(--scaleActive) translate(var(--offsetRight), -50%);
  }
}

.dark {
  color: var(--white);
  background-color: var(--gray-dark-deep);
}

.light {
  background-color: var(--white);
}