@innovaccer/design-system/css/src/components/tooltip.module.css

React components library project for Innovaccer Design System

.Tooltip {
  max-width: var(--spacing-640);
  padding: var(--spacing-10) var(--spacing-20);
  border-radius: var(--border-radius-10);
  z-index: 500;
  background: var(--inverse);
  overflow: hidden;
  box-sizing: border-box;
  transition: opacity 120ms;
  transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
}

.Tooltip-text {
  word-break: break-word;
  hyphens: auto;
}

@keyframes tooltip-open-top {
  from {
    top: 0px;
    opacity: 0;
  }
  to {
    top: -4px;
    opacity: 1;
  }
}
@keyframes tooltip-close-top {
  from {
    top: -4px;
    opacity: 1;
  }
  to {
    top: 0px;
    opacity: 0;
  }
}

.Tooltip-animation-open-top {
  animation: tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1);
  animation-fill-mode: forwards;
}
.Tooltip-animation-close-top {
  animation: tooltip-close-top 80ms cubic-bezier(0.4, 0.14, 1, 1);
}
@keyframes tooltip-open-bottom {
  from {
    top: -4px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@keyframes tooltip-close-bottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: -4px;
    opacity: 0;
  }
}

.Tooltip-animation-open-bottom {
  animation: tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
  animation-fill-mode: forwards;
}
.Tooltip-animation-close-bottom {
  animation: tooltip-close-bottom 80ms cubic-bezier(0.4, 0.14, 1, 1);
}

@keyframes tooltip-open-left {
  from {
    left: 1px;
    opacity: 0;
  }
  to {
    left: -3px;
    opacity: 1;
  }
}
@keyframes tooltip-close-left {
  from {
    left: -3px;
    opacity: 1;
  }
  to {
    left: 1px;
    opacity: 0;
  }
}

.Tooltip-animation-open-left {
  animation: tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1);
  animation-fill-mode: forwards;
}
.Tooltip-animation-close-left {
  animation: tooltip-close-left 80ms cubic-bezier(0.4, 0.14, 1, 1);
}

@keyframes tooltip-open-right {
  from {
    left: -3px;
    opacity: 0;
  }
  to {
    left: 1px;
    opacity: 1;
  }
}
@keyframes tooltip-close-right {
  from {
    left: 1px;
    opacity: 1;
  }
  to {
    left: -3px;
    opacity: 0;
  }
}

.Tooltip-animation-open-right {
  animation: tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
  animation-fill-mode: forwards;
}
.Tooltip-animation-close-right {
  animation: tooltip-close-right 80ms cubic-bezier(0.4, 0.14, 1, 1);
}

.Tooltip-container {
  transition-delay: 400ms;
  animation-delay: 400ms;
}