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

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

.tooltip {
  /* internal CSS vars */
  --_delay: 200ms;
  --_p-inline: 1ch;
  --_p-block: 4px;
  --_triangle-size: 7px;
  /* --_bg: hsl(0 0% 20%); */
  --_bg: var(--chalkboard-10);
  --_shadow-alpha: 20%;

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

  /* Using conic gradients to get a clear tip triangle */
  --_bottom-tip: conic-gradient(
      from -30deg at bottom,
      #0000,
      #000 1deg 60deg,
      #0000 61deg
    )
    bottom / 100% 50% no-repeat;
  --_top-tip: conic-gradient(
      from 150deg at top,
      #0000,
      #000 1deg 60deg,
      #0000 61deg
    )
    top / 100% 50% no-repeat;
  --_right-tip: conic-gradient(
      from -120deg at right,
      #0000,
      #000 1deg 60deg,
      #0000 61deg
    )
    right / 50% 100% no-repeat;
  --_left-tip: conic-gradient(
      from 60deg at left,
      #0000,
      #000 1deg 60deg,
      #0000 61deg
    )
    left / 50% 100% no-repeat;

  pointer-events: none;
  user-select: none;

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

  position: absolute;
  z-index: 1;
  inline-size: max-content;
  max-inline-size: 25ch;
  text-align: start;
  font-family: var(--mono-font-family);
  text-transform: none;
  font-size: 0.9rem;
  font-weight: normal;
  line-height: initial;
  letter-spacing: 0;
  padding: var(--_p-block) var(--_p-inline);
  margin: 0;
  border-radius: 3px;
  background: var(--_bg);
  @apply text-chalkboard-110;
  will-change: filter;
  filter: drop-shadow(0 1px 3px hsl(0 0% 0% / var(--_shadow-alpha)))
    drop-shadow(0 6px 12px hsl(0 0% 0% / var(--_shadow-alpha)));
}

:global(.dark) .tooltip {
  --_bg: var(--chalkboard-110);
  @apply text-chalkboard-10;
}

/* TODO we don't support a light theme yet */
/* @media (prefers-color-scheme: light) {
  .tooltip {
      --_bg: white;
      --_shadow-alpha: 15%;
  }
} */

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

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

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

:is(:focus, :focus-visible, :focus-within) > .tooltip {
  --_delay: 0 !important;
}

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

/* tooltip shape is a pseudo element so we can cast a shadow */
.tooltip::after {
  content: '';
  background: var(--_bg);
  position: absolute;
  z-index: -1;
  inset: 0;
  mask: var(--_tip);
}

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

/* TOP || BLOCK-START */
.tooltip.top,
.tooltip.blockStart {
  inset-inline-start: 50%;
  inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
  --_x: calc(50% * var(--isRTL));
}

.tooltip.top::after,
.tooltip.tooltip.blockStart::after {
  --_tip: var(--_bottom-tip);
  inset-block-end: calc(var(--_triangle-size) * -1);
  border-block-end: var(--_triangle-size) solid transparent;
}

/* RIGHT || INLINE-END */
.tooltip.right,
.tooltip.inlineEnd {
  inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-size));
  inset-block-end: 50%;
  --_y: 50%;
}

.tooltip.right::after,
.tooltip.tooltip.inlineEnd::after {
  --_tip: var(--_left-tip);
  inset-inline-start: calc(var(--_triangle-size) * -1);
  border-inline-start: var(--_triangle-size) solid transparent;
}

.tooltip.right:dir(rtl)::after,
.tooltip.inlineEnd:dir(rtl)::after {
  --_tip: var(--_right-tip);
}

/* BOTTOM || BLOCK-END */
.tooltip.bottom,
.tooltip.blockEnd {
  inset-inline-start: 50%;
  inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
  --_x: calc(50% * var(--isRTL));
}

.tooltip.bottom::after,
.tooltip.tooltip.blockEnd::after {
  --_tip: var(--_top-tip);
  inset-block-start: calc(var(--_triangle-size) * -1);
  border-block-start: var(--_triangle-size) solid transparent;
}

/* LEFT || INLINE-START */
.tooltip.left,
.tooltip.inlineStart {
  inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-size));
  inset-block-end: 50%;
  --_y: 50%;
}

.tooltip.left::after,
.tooltip.tooltip.inlineStart::after {
  --_tip: var(--_right-tip);
  inset-inline-end: calc(var(--_triangle-size) * -1);
  border-inline-end: var(--_triangle-size) solid transparent;
}

.tooltip.left:dir(rtl)::after,
.tooltip.inlineStart:dir(rtl)::after {
  --_tip: var(--_left-tip);
}

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

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

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

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