درست کردن تولتیپ مثل آب خوردن

<script>
document.addEventListener('DOMContentLoaded', () => {
  const tooltips = {
    '.btn-buy': { text: 'خرید سریع محصول', position: 'mouse' },
    '.feature-icon': { text: 'ویژگی خاص این بخش', position: 'right' },
    '.logo': { text: 'بازگشت به صفحه اصلی', position: 'bottom' },
    '.menu-item': { text: 'رفتن به منوی دیگر', position: 'left' }
  };
	
	
	//    '.class': { text: 'matn', position: 'left' }
	//    position = left , right , bottom , top از این موقعیت ها می توانید استفاده بکنید
	//    بین هر کدوم یک کاما(,)قرار دهید

  const tooltipEl = document.createElement('div');
  tooltipEl.style.position = 'absolute';
  tooltipEl.style.padding = '8px 12px';
  tooltipEl.style.background = 'rgba(0,0,0,0.88)';
  tooltipEl.style.color = '#fff';
  tooltipEl.style.fontSize = '13px';
  tooltipEl.style.borderRadius = '6px';
  tooltipEl.style.pointerEvents = 'none';
  tooltipEl.style.zIndex = '99999';
  tooltipEl.style.opacity = '0';
  tooltipEl.style.transition = 'opacity 0.12s ease, transform 0.12s ease';
  tooltipEl.style.whiteSpace = 'nowrap';
  tooltipEl.style.boxShadow = '0 6px 18px rgba(0,0,0,0.18)';
  tooltipEl.style.display = 'none';

  const textSpan = document.createElement('span');
  tooltipEl.appendChild(textSpan);

  const arrow = document.createElement('div');
  arrow.style.position = 'absolute';
  arrow.style.width = '0';
  arrow.style.height = '0';
  arrow.style.borderStyle = 'solid';
  tooltipEl.appendChild(arrow);

  document.body.appendChild(tooltipEl);

  function resetArrowStyles() {
    arrow.style.top = '';
    arrow.style.bottom = '';
    arrow.style.left = '';
    arrow.style.right = '';
    arrow.style.transform = '';
    arrow.style.borderWidth = '';
    arrow.style.borderColor = '';
  }

  function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }

  Object.keys(tooltips).forEach(selector => {
    const { text, position } = tooltips[selector];
    document.querySelectorAll(selector).forEach(el => {
      el.addEventListener('mouseenter', () => {
        textSpan.textContent = text;
        tooltipEl.style.display = 'block';
        tooltipEl.style.opacity = '0'; // ابتدا مخفی باشه تا اندازه‌گیری صحیح انجام بشه

        void tooltipEl.offsetWidth;

        const rect = el.getBoundingClientRect();
        const ttWidth = tooltipEl.offsetWidth;
        const ttHeight = tooltipEl.offsetHeight;

        const gap = 8;       // فاصله بین المان و تولتیپ
        const arrowSize = 7; // اندازه پایه فلش (px)

        resetArrowStyles();
        arrow.style.borderWidth = `${arrowSize}px`;
        // ست کردن رنگ مرز‌ها بصورت پیش‌فرض شفاف
        arrow.style.borderColor = 'transparent';

        let left = rect.left + window.scrollX;
        let top = rect.top + window.scrollY;

        switch (position) {
          case 'top':
            left += (rect.width / 2) - (ttWidth / 2);
            top -= (ttHeight + gap + arrowSize);
            // فلش زیر (به سمت پایین) => border-top رنگی
            arrow.style.left = `calc(50% - ${arrowSize}px)`;
            arrow.style.bottom = `-${arrowSize * 2}px`;
            arrow.style.borderColor = `rgba(0,0,0,0.88) transparent transparent transparent`;
            break;

          case 'bottom':
            left += (rect.width / 2) - (ttWidth / 2);
            top += rect.height + gap + arrowSize;
            arrow.style.left = `calc(50% - ${arrowSize}px)`;
            arrow.style.top = `-${arrowSize * 2}px`;
            arrow.style.borderColor = `transparent transparent rgba(0,0,0,0.88) transparent`;
            break;

          case 'left':
            left -= (ttWidth + gap + arrowSize);
            top += (rect.height / 2) - (ttHeight / 2);
            arrow.style.right = `-${arrowSize * 2}px`;
            arrow.style.top = `calc(50% - ${arrowSize}px)`;
            arrow.style.borderColor = `transparent transparent transparent rgba(0,0,0,0.88)`;
            break;

          case 'right':
            left += rect.width + gap + arrowSize;
            top += (rect.height / 2) - (ttHeight / 2);
            arrow.style.left = `-${arrowSize * 2}px`;
            arrow.style.top = `calc(50% - ${arrowSize}px)`;
            arrow.style.borderColor = `transparent rgba(0,0,0,0.88) transparent transparent`;
            break;

          default:
            left += (rect.width / 2) - (ttWidth / 2);
            top -= (ttHeight + gap + arrowSize);
            arrow.style.left = `calc(50% - ${arrowSize}px)`;
            arrow.style.bottom = `-${arrowSize * 2}px`;
            arrow.style.borderColor = `rgba(0,0,0,0.88) transparent transparent transparent`;
            break;
        }

        const pageWidth = document.documentElement.clientWidth;
        const pageHeight = document.documentElement.clientHeight;
        left = clamp(left, window.scrollX + 6, window.scrollX + pageWidth - ttWidth - 6);
        top = clamp(top, window.scrollY + 6, window.scrollY + pageHeight - ttHeight - 6);

        tooltipEl.style.left = `${left}px`;
        tooltipEl.style.top = `${top}px`;

        tooltipEl.style.transform = position === 'top' ? 'translateY(-3px)' :
                                     position === 'bottom' ? 'translateY(3px)' : 'translateY(0px)';
        requestAnimationFrame(() => {
          tooltipEl.style.opacity = '1';
        });
      });

      el.addEventListener('mouseleave', () => {
        tooltipEl.style.opacity = '0';
        setTimeout(() => {
          tooltipEl.style.display = 'none';
          resetArrowStyles();
        }, 150);
      });

      el.addEventListener('mousemove', (e) => {
        // مثال: اگر position === 'mouse' باشه
        const cfg = tooltips[selector];
        if (cfg && cfg.position === 'mouse') {
          const mx = e.pageX + 12;
          const my = e.pageY + 12;
          const pageWidth = document.documentElement.clientWidth;
          const pageHeight = document.documentElement.clientHeight;
          const ttW = tooltipEl.offsetWidth;
          const ttH = tooltipEl.offsetHeight;
          const left = clamp(mx, window.scrollX + 6, window.scrollX + pageWidth - ttW - 6);
          const top  = clamp(my, window.scrollY + 6, window.scrollY + pageHeight - ttH - 6);
          tooltipEl.style.left = left + 'px';
          tooltipEl.style.top = top + 'px';
        }
      });

    });
  });

});
</script>