censa_front_end_library/css/src/components/tooltip.css

React components library project for censa Design System

.Tooltip {
  max-width: var(--spacing-9);
  padding: var(--spacing-m) var(--spacing);
  border-radius: var(--spacing-m);
  z-index: 500;
  background: color-mod(var(--inverse) a(0.88));
  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;
  color: var(--white) !important;
}

@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);
}

.Tooltip-animation-open-top::after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #343238 10px;
  bottom: -10px;
  content: ' ';
  height: 0;
  left: 50%;
  margin-left: 0px;
  position: absolute;
  width: 0;
}

@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;
  margin-top: 8px !important;
}

.Tooltip-animation-open-bottom::after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #343238 10px;
  bottom: 30px;
  transform: rotate(180deg);
  content: ' ';
  height: 0;
  left: 50%;
  margin-left: 0px;
  position: absolute;
  width: 0;
}

.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;
  margin-left: 10px !important;
}
.Tooltip-animation-open-left::after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #343238 10px;
  bottom: 30px;
  transform: rotate(90deg);
  content: ' ';
  height: 0;
  left: -13px;
  top: 10px;
  margin-left: 0px;
  position: absolute;
  width: 0;
}

.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;
  margin-left: 10px !important;
}

.Tooltip-animation-open-right ::after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #343238 10px;
  bottom: 30px;
  transform: rotate(90deg);
  content: ' ';
  height: 0;
  left: -13px;
  top: 10px;
  margin-left: 0px;
  position: absolute;
  width: 0;
}

.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;
} */

.Tooltip-container {
  background: var(--night);
  margin-bottom: 10px !important;
}

.custom-tooltip {
  background-color: #ff0000; /* Your desired background color */
  color: #ffffff; /* Your desired text color */
  /* Add any other custom styles you want */
}

/* .Tooltip-animation-open-top.Popover.Tooltip-container {
  background: var(--white);
  border: 1px solid #e7e7e8;
  box-shadow: none;
  border-radius: 0;
} */

/* .Tooltip-animation-open-top.Popover.Tooltip-container::after {
  border-top: solid #e7e7e8 10px;
} */

.Tooltip-animation-open-top.Popover.Tooltip-container .Tooltip div {
  color: var(--white);
  border-bottom: 1px solid #e0e0e0;
  padding: 5px 0px 4px 0px;
}
.Tooltip-animation-open-top.Popover.Tooltip-container .Tooltip div:last-child {
  border-bottom: none;
}