View Bubble

<div class="nuda-cur2-view-bubble">
  <span class="nuda-cur2-view-bubble__caption">Hover to preview</span>
  <span class="nuda-cur2-view-bubble__bubble">
    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/>
      <circle cx="12" cy="12" r="3"/>
    </svg>
    View
  </span>
</div>

/* View Bubble — a small pill label tracks the pointer inside the area. */
(function () {
  document.querySelectorAll('.nuda-cur2-view-bubble').forEach(function (area) {
    area.addEventListener('mousemove', function (e) {
      var rect = area.getBoundingClientRect();
      area.style.setProperty('--x', (e.clientX - rect.left) + 'px');
      area.style.setProperty('--y', (e.clientY - rect.top) + 'px');
    });
  });
})();

.nuda-cur2-view-bubble {
  --x: 50%;
  --y: 50%;
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 120px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg,#1a1a1a,#101010);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
}

.nuda-cur2-view-bubble__caption {
  color: #777;
  font-size: 12px;
}

.nuda-cur2-view-bubble__bubble {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e4ff54;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: translate(var(--x),var(--y)) translate(-50%,-50%);
  transition: opacity .2s ease,transform .12s linear;
  pointer-events: none;
  white-space: nowrap;
}

.nuda-cur2-view-bubble:hover .nuda-cur2-view-bubble__bubble {
  opacity: 1;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cur2-view-bubble__bubble {
    transition: opacity .2s ease;
  }
}