Magnetic Tooltip

プレビュー

ユースケースと特徴

Magnetic Tooltip（マグネティック・ツールチップ）は、ユーザーのカーソルに滑らかに追従するリッチなUIコンポーネントです。

滑らかな追従: マウスの動きに遅延（イージング）を加えて追従することで、自然で洗練された印象を与えます。
グラスモーフィズムデザイン: 背景のぼかし（backdrop-filter）と半透明のボーダーを組み合わせ、近未来的な美しさを演出します。
直感的なフィードバック: アクションを促すボタンやカードなど、特に注目を集めたい要素に最適です。

デザインとUXのポイント

アニメーションの心地よさ イージング関数やrequestAnimationFrameを用いた線形補間（Lerp）により、カクつきのない滑らかな動きを実現しています。
視覚的な階層感 box-shadowやbackdrop-filterを重ねることで、要素が画面上に浮かび上がっているような立体感を持たせています。
インタラクションの邪魔をしない ツールチップ自体にはpointer-events: noneを指定し、ユーザーのホバー操作を妨げないように設計しています。

カスタマイズ方法

追従スピードの調整: JavaScript内の const speed = 0.15; の値を変更することで、追従のスピードを調整できます（1に近いほど速くなります）。
テーマカラーの変更: CSS内の .magnetic-target の linear-gradient や .magnetic-tooltip の背景色をプロジェクトのテーマに合わせて変更してください。
位置のオフセット: .magnetic-tooltip.visible の transform: ... translateY(-15px); の値を調整することで、カーソルからツールチップまでの距離を変更できます。

実装コード

<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 {
  transform: translateY(-4px) scale(1.05);
  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() {
  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;
    });

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

ブラウザ対応状況

Chrome: 対応
Firefox: 対応
Safari: 対応
Edge: 対応

※ `backdrop-filter` プロパティは最新の主要ブラウザでサポートされています。Safariでは `-webkit-` プレフィックスを使用しています。