title-tooltip.css

#titleTtip{
  --radius: 6px;
  --trans-duration: .2s;
  max-width: 220px;
  position: fixed;
  z-index: max;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transition: 0s;
}

#titleTtip .titleTtip__text{
  padding: 6px 11px;
  border-radius: var(--radius);
  color: white;
  transform: scale(.75);
  transform-origin: 50% top;
  background: black;
  backdrop-filter: blur(3px);
}

#titleTtip::after {
  --size: 8px;
  content: "";
  bottom: calc(100% - 1px); /* very odd 1px gap */
  /*
    1. limit minimum left value to the radius of the tooltip so it starts just when thr radius curves
    2. place the arrow exactly where the mouse pointer is
    3. limit the right position (maximum left) to fit exactly
  */
  left: Clamp(var(--radius)/2, var(--mouse-pos, 0) * 1px - var(--size)/2, 100% - var(--size)*2 - var(--radius)/2 - 1px);
  right: 0;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: black;
  border-width: var(--size);
}

[data-over]{
  --x: calc(var(--pos-left) + var(--window-scroll-x));
  --y: calc(var(--pos-top) + var(--window-scroll-y));
  position: absolute;
  z-index: 999999;
  top: 0;
  left: 0;
  transform: translate(calc(var(--x) * 1px),
                       calc(var(--y) * 1px));
}

/* Only tooltips which are positiond have "style" attribute */
#titleTtip[data-over] > *{
  transform: none;
  transition: var(--trans-duration);
}

#titleTtip[data-over]{
  opacity: 1;
  transition: opacity var(--trans-duration);
}