Animasyonlu Manyetik Tooltip

<div class="magnetic-tooltip-container">
<button class="magnetic-target" data-tooltip="🚀 新しいアップデートが利用可能です">
  Hover Me
</button>
<button class="magnetic-target" data-tooltip="✨ プレミアム機能を見る">
  Explore
</button>
<div class="magnetic-tooltip"></div>
</div>

<style>
.magnetic-tooltip-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: #000000;
  background-image: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #000000 100%);
  border-radius: 1rem;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}

.magnetic-target {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.5);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, filter 0.3s ease;
}

.magnetic-target:hover {
  box-shadow: 0 20px 40px -10px rgba(139, 92, 246, 0.7);
  filter: brightness(1.1);
}

.magnetic-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  padding: 0.75rem 1.25rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  color: #f8fafc;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 
    0 24px 38px 3px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translate(-50%, -100%) scale(0.9) translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 9999;
}

.magnetic-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1) translateY(-15px);
}
</style>

<script>
(function initMagneticTooltip() {
  const targets = document.querySelectorAll('.magnetic-target');
  const tooltip = document.querySelector('.magnetic-tooltip');

  if(!tooltip) return;

  let mouseX = 0;
  let mouseY = 0;
  let tooltipX = 0;
  let tooltipY = 0;
  let isHovered = false;
  let animationFrameId;

  const speed = 0.15;

  function animate() {
    if (isHovered) {
      tooltipX += (mouseX - tooltipX) * speed;
      tooltipY += (mouseY - tooltipY) * speed;
      tooltip.style.left = tooltipX + 'px';
      tooltip.style.top = tooltipY + 'px';
      animationFrameId = requestAnimationFrame(animate);
    }
  }

  targets.forEach(function(target) {
    target.addEventListener('mouseenter', function(e) {
      isHovered = true;
      tooltip.textContent = target.getAttribute('data-tooltip');
      tooltip.classList.add('visible');
      
      mouseX = e.clientX;
      mouseY = e.clientY;
      tooltipX = mouseX;
      tooltipY = mouseY;
      tooltip.style.left = tooltipX + 'px';
      tooltip.style.top = tooltipY + 'px';
      
      if (animationFrameId) cancelAnimationFrame(animationFrameId);
      animate();
    });

    target.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;

      // Magnetic pull effect on the button itself
      const rect = target.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      const deltaX = (mouseX - centerX) * 0.3;
      const deltaY = (mouseY - centerY) * 0.3;
      target.style.transform = 'translate(' + deltaX + 'px, ' + deltaY + 'px) scale(1.05)';
    });

    target.addEventListener('mouseleave', function() {
      isHovered = false;
      tooltip.classList.remove('visible');
      target.style.transform = ''; // reset button position
      if (animationFrameId) cancelAnimationFrame(animationFrameId);
    });
  });
})();
</script>