modeling-app/src/components/Tooltip.module.css

/* Adapted from https://github.com/argyleink/gui-challenges/blob/main/tooltips/tool-tip.css */

.tooltipWrapper {
  /* Used to power spacing and layout for RTL languages */
  --isRTL: -1;

  /* internal CSS vars */
  --_delay: 200ms;
  --_p-block: 4px;
  --_bg: var(--chalkboard-10);
  --_shadow-alpha: 8%;
  --_theme-alpha: 0.15;

  pointer-events: none;
  user-select: none;
  visibility: hidden;
  position: absolute;
  z-index: 1;

  /* The parts that will be transitioned */
  opacity: 0;
  transform: translate(var(--_x, 0), var(--_y, 0));
  transition:
    transform 0.15s ease-out,
    opacity 0.11s ease-out;
}

.tooltip {
  @apply relative;
  inline-size: max-content;
  padding: var(--_p-block) calc(2 * var(--_p-block));
  margin: 0;
  background: var(--_bg);
  @apply text-chalkboard-110;
  will-change: filter;
  filter: drop-shadow(0 1px 2px hsl(0 0% 0% / var(--_shadow-alpha)))
    drop-shadow(0 4px 6px hsl(0 0% 0% / calc(var(--_shadow-alpha) / 2)));
}

:global(.dark) .tooltip {
  --_bg: var(--chalkboard-90);
  --_theme-alpha: 40%;
  --_shadow-alpha: 16%;
  @apply text-chalkboard-10;
}

.tooltip:dir(rtl) {
  --isRTL: 1;
}

/* :has and :is are pretty fresh CSS pseudo-selectors, may not see full support */
:has(> .tooltipWrapper) {
  position: relative;
}

:is(:hover, :active) > .tooltipWrapper {
  visibility: visible;
  opacity: 1;
  transition-delay: var(--_delay);
}

:is(:focus-visible) > .tooltipWrapper.withFocus,
:focus-within > .tooltipWrapper.withFocus {
  visibility: visible;
  opacity: 1;
}

*:focus-visible .tooltipWrapper {
  --_delay: 0 !important;
}

/* prepend some prose for screen readers only */
.tooltip::before,
.tooltip::after {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

.tooltip::before {
  content: '; Has tooltip: ';
}

/* Sometimes there's no visible label,
 * so we'll use the tooltip as the label
*/
.tooltip:only-child::before {
  content: '';
}

.tooltip:only-child::after {
  content: ' (tooltip)';
}

.top,
.bottom {
  text-align: center;
}

.tooltipWrapper.top {
  inset-inline-start: 50%;
  inset-block-end: 100%;
  --_x: calc(50% * var(--isRTL));
}

.tooltipWrapper.top-right {
  inset-block-end: 100%;
  inset-inline-end: 0;
}

.tooltipWrapper.right {
  inset-inline-start: 100%;
  inset-block-end: 50%;
  --_y: 50%;
}

.tooltipWrapper.bottom-right {
  inset-block-start: 100%;
  inset-inline-end: 0;
}

.tooltipWrapper.bottom {
  --_x: calc(50% * var(--isRTL));
  inset-inline-start: 50%;
  inset-block-start: 100%;
}

.tooltipWrapper.bottom-left {
  inset-block-start: 100%;
}

.tooltipWrapper.left {
  inset-inline-end: 100%;
  inset-block-end: 50%;
  --_y: 50%;
}

.tooltipWrapper.top-left {
  inset-block-end: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  /* TOP || BLOCK-START */
  :has(
      > :is(
          .tooltipWrapper.top,
          .tooltipWrapper.top-left,
          .tooltipWrapper.top-right
        )
    ):not(:hover, :active)
    .tooltipWrapper {
    --_y: 3px;
  }

  /* RIGHT || INLINE-END */
  :has(> :is(.tooltipWrapper.right)):not(:hover, :active) .tooltipWrapper {
    --_x: calc(var(--isRTL) * -3px * -1);
  }

  /* BOTTOM || BLOCK-END */
  :has(
      > :is(
          .tooltipWrapper.bottom,
          .tooltipWrapper.bottom-left,
          .tooltipWrapper.bottom-right
        )
    ):not(:hover, :active)
    .tooltipWrapper {
    --_y: -3px;
  }

  /* BOTTOM || BLOCK-END */
  :has(> :is(.tooltipWrapper.left)):not(:hover, :active) .tooltipWrapper {
    --_x: calc(var(--isRTL) * 3px * -1);
  }
}