funda-ui/Tooltip/index.css

React components using pure Bootstrap 5+ which does not contain any external style and script libraries.

/* ======================================================
    <!-- Tooltip -->
/* ====================================================== */
/*
 * 1. Base Styles
 * 2. Position Modifiers - Top
 * 3. Position Modifiers - Top Left
 * 4. Position Modifiers - Top Right
 * 5. Position Modifiers - Bottom
 * 6. Position Modifiers - Bottom Left
 * 7. Position Modifiers - Bottom Right
 * 8. Position Modifiers - Left
 * 9. Position Modifiers - Right
 * 10. Size
*/
.tooltip__wrapper {
  --tooltip-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
  --tooltip-content-bg: rgba(17, 17, 17, 0.9);
  --tooltip-content-color: #fff;
  --tooltip-content-font-size: 0.75em;
  --tooltip-content-padding-x: 1em;
  --tooltip-content-padding-y: .5em;
  --tooltip-content-line-height: 1.5;
  --tooltip-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
  --tooltip-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
  --tooltip-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
  --tooltip-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
  --tooltip-arrow-width: 18px;
  --tooltip-arrow-height: 6px;
  position: absolute;
  z-index: 1055; /* --bs-modal-zindex */
  pointer-events: none;
  display: none;
  margin-top: -0.2rem;
  /*
  ---------------------------
  1. Base Styles
  ---------------------------
  */
  /*
  ---------------------------
  2. Position Modifiers - Top
  ---------------------------
  */
  /*
  ---------------------------
  3. Position Modifiers - Top Left
  ---------------------------
  */
  /*
  ---------------------------
  4. Position Modifiers - Top Right
  ---------------------------
  */
  /*
  ---------------------------
  5. Position Modifiers - Bottom
  ---------------------------
  */
  /*
  ---------------------------
  6. Position Modifiers - Bottom Left
  ---------------------------
  */
  /*
  ---------------------------
  7. Position Modifiers - Bottom Right
  ---------------------------
  */
  /*
  ---------------------------
  10. Size
  ---------------------------
  */
}
.tooltip__wrapper::before {
  background-size: 100% auto !important;
  content: "";
  position: absolute;
}
.tooltip__wrapper.active {
  display: block !important;
}
.tooltip__wrapper.active::before,
.tooltip__wrapper.active > .tooltip__content {
  opacity: 1;
}
.tooltip__wrapper:focus::before,
.tooltip__wrapper:focus > .tooltip__content {
  opacity: 1;
}
.tooltip__wrapper::before,
.tooltip__wrapper > .tooltip__content {
  backface-visibility: hidden;
  will-change: transform;
  opacity: 0;
  box-sizing: border-box;
  z-index: 10;
  transform-origin: top;
  box-shadow: var(--tooltip-box-shadow);
  transition: none !important; /* Don't use transition if position is outside window */
}
.tooltip__wrapper > .tooltip__content {
  background: var(--tooltip-content-bg);
  border-radius: 4px;
  color: var(--tooltip-content-color);
  content: attr(aria-label);
  font-size: var(--tooltip-content-font-size);
  font-weight: normal;
  text-transform: none;
  padding: var(--tooltip-content-padding-y) var(--tooltip-content-padding-x);
  white-space: nowrap;
  box-sizing: content-box;
  line-height: var(--tooltip-content-line-height);
}
.tooltip__wrapper > .tooltip__content img {
  height: auto !important;
  margin: 0.5rem 0;
}
.tooltip__wrapper[data-microtip-position|=top]::before {
  background: var(--tooltip-arrow-bg-top);
  height: var(--tooltip-arrow-height);
  width: var(--tooltip-arrow-width);
}
.tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
  margin-bottom: var(--tooltip-arrow-height);
}
.tooltip__wrapper[data-microtip-position|=top]::before {
  top: calc(100% - var(--tooltip-arrow-height));
  left: calc(var(--tooltip-arrow-width) / 2 * -1);
}
.tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
  bottom: calc(100% + var(--tooltip-arrow-height));
  left: 50%;
  transform: translateX(-50%);
}
.tooltip__wrapper[data-microtip-position=top-left] > .tooltip__content {
  bottom: calc(100% + var(--tooltip-arrow-height));
  left: 50%;
  transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
}
.tooltip__wrapper[data-microtip-position=top-right] > .tooltip__content {
  bottom: calc(100% + var(--tooltip-arrow-height));
  left: 50%;
  transform: translateX(calc(0% - var(--tooltip-arrow-width)));
}
.tooltip__wrapper[data-microtip-position|=bottom]::before {
  background: var(--tooltip-arrow-bg-bottom);
  height: var(--tooltip-arrow-height);
  width: var(--tooltip-arrow-width);
  margin-top: 5px;
  margin-bottom: 0;
}
.tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
  margin-top: var(--tooltip-arrow-height);
}
.tooltip__wrapper[data-microtip-position|=bottom]::before {
  bottom: calc(100% - var(--tooltip-arrow-height));
  left: calc(var(--tooltip-arrow-width) / 2 * -1);
}
.tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
  bottom: auto;
  top: calc(100% + var(--tooltip-arrow-height));
  left: 50%;
  transform: translateX(-50%);
}
.tooltip__wrapper[data-microtip-position=bottom-left] > .tooltip__content {
  bottom: auto;
  top: calc(100% + var(--tooltip-arrow-height));
  left: 50%;
  transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
}
.tooltip__wrapper[data-microtip-position=bottom-right] > .tooltip__content {
  bottom: auto;
  top: calc(100% + var(--tooltip-arrow-height));
  left: 50%;
  transform: translateX(calc(0% - var(--tooltip-arrow-width)));
}
.tooltip__wrapper[data-microtip-size=auto].tooltip__content {
  white-space: nowrap;
  width: auto;
  max-width: 530px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tooltip__wrapper[data-microtip-size=small].tooltip__content {
  white-space: initial;
  width: 80px;
}
.tooltip__wrapper[data-microtip-size=medium].tooltip__content {
  white-space: initial;
  width: 150px;
}
.tooltip__wrapper[data-microtip-size=large].tooltip__content {
  white-space: initial;
  width: 260px;
}