Follow Cursor Tip

<!-- Follow Cursor Tip — vanilla JS updates --tx / --ty on pointermove -->
<div class="nuda-followtip-wrap" id="followtip">
  <span class="nuda-followtip__area">Move over me</span>
  <span class="nuda-followtip" role="tooltip">Right here</span>
</div>

<script>
  const wrap = document.getElementById("followtip");
  wrap.addEventListener("pointermove", (e) => {
    const r = wrap.getBoundingClientRect();
    wrap.style.setProperty("--tx", (e.clientX - r.left) + "px");
    wrap.style.setProperty("--ty", (e.clientY - r.top) + "px");
  });
</script>

/* Follow Cursor Tip
   A tooltip that trails the cursor inside the trigger area.
   Position is driven by --tx / --ty custom properties set in JS.
   Customize: --followtip-bg, offset (14px) */

.nuda-followtip-wrap {
  --tx: 0px;
  --ty: 0px;
  position: relative;
  display: inline-block;
  cursor: default;
}

.nuda-followtip__area {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ccc;
  font-size: 0.85rem;
}

.nuda-followtip {
  --followtip-bg: #e4ff54;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(calc(var(--tx) + 14px), calc(var(--ty) + 14px), 0);
  background: var(--followtip-bg);
  color: #09090b;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 10;
}

.nuda-followtip-wrap:hover .nuda-followtip {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-followtip {
    transition: none;
    transform: translate3d(0, calc(100% + 8px), 0);
  }
}