সৃষ্টি

জাভাস্ক্রিপ্টের মাধ্যমে পজিশন করা ফ্লোটিং টুলটিপ সিস্টেম ফেড ট্রানজিশন সহ।

/* টুলটিপ কন্টেইনার */
#ctx-tooltip {
  position: fixed;
  z-index: 9998;
  background: rgba(3, 5, 8, 0.98);
  border: 1px solid #00d4ff;
  color: #00d4ff;
  padding: 0.5rem 1rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  max-width: 250px;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

#ctx-tooltip.visible {
  opacity: 1;
}

মাউস কার্সর অনুসরণ করে এবং হোভারে দেখায় এমন টুলটিপ সিস্টেম।

const Tooltips = {
  init() {
    const triggers = document.querySelectorAll('[data-tooltip]');
    const tooltip = document.getElementById('ctx-tooltip');
    
    triggers.forEach(trigger => {
      trigger.addEventListener('mouseenter', () => {
        tooltip.textContent = trigger.dataset.tooltip;
        tooltip.classList.add('visible');
      });

      trigger.addEventListener('mousemove', (e) => {
        tooltip.style.left = (e.clientX + 15) + 'px';
        tooltip.style.top = (e.clientY + 15) + 'px';
      });

      trigger.addEventListener('mouseleave', () => {
        tooltip.classList.remove('visible');
      });
    });
  }
};