‏ترفند تأخیر هوشمند تولتیپ‌ها

نویسنده تعریف می‌کنه که تو محصولش کنار هر سؤال مصاحبه، لوگوی شرکت‌ها رو نشون می‌ده و با هاور روی لوگو اسم شرکت تو یه تولتیپ میاد. مشکل از جایی شروع شد که تأخیر تولتیپ صفر بود: فقط رد شدن ماوس از روی صفحه باعث می‌شد تولتیپ‌ها پشت‌سرهم باز بشن. اضافه‌کردن یه تأخیر ۲۰۰ میلی‌ثانیه‌ای اون مشکل رو حل کرد ولی یکی جدید ساخت؛ جایی که چند لوگو کنار هم‌ان، هر بار باید دوباره ۲۰۰ میلی‌ثانیه صبر می‌کردی و حس کندی می‌داد.

راه‌حلی که ارائه می‌ده سه بخش داره: هاور روی لوگو ۲۰۰ میلی‌ثانیه صبر می‌کنه و بعد تولتیپ باز می‌شه؛ با بسته‌شدن تولتیپ یه تایمر ۳۰۰ میلی‌ثانیه‌ای شروع می‌شه که بهش می‌گه پنجرهٔ «گرم»، و اگه تو همین بازه روی لوگوی بعدی بری تولتیپ بدون هیچ تأخیر و انیمیشنی باز می‌شه؛ با تموم‌شدن اون ۳۰۰ میلی‌ثانیه صفحه دوباره سرد می‌شه و تأخیر برمی‌گرده. مرحلهٔ سوم مهمه، وگرنه اولین تولتیپ تأخیر رو برای همیشهٔ صفحه خاموش می‌کرد.

هستهٔ کد هم ساده‌ست: هندلر ورود ماوس فقط یه سؤال می‌پرسه، صفحه گرمه یا نه؟

function handleEnter() {
  if (tooltips.isWarm) {
    show();
    return;
  }
  openTimer.current = setTimeout(show, tooltips.openDelay);
}

موقع باز شدن، مقدار گرم‌بودن تو یه فلگ به اسم instant کپی می‌شه و به شکل data-attribute روی تولتیپ می‌شینه تا CSS انیمیشن ورود رو رد کنه. هندلر خروج هم اول تایمر معلق رو با clearTimeout پاک می‌کنه، برای همین عبور سریع ماوس اصلاً هیچ تولتیپی باز نمی‌کنه.

.tooltip[data-instant="true"] {
  transition-duration: 0ms;
}

حالت مشترک صفحه تو یه Provider نگه داشته می‌شه و نکتهٔ ظریفش اینه که warm یه ref هست نه state، چون تغییرش نباید همهٔ تولتیپ‌های صفحه رو دوباره رندر کنه؛ فقط داخل هندلرها خونده می‌شه. عدد ۲۰۰ هم دلبخواه نیست: به گفتهٔ نویسنده زیر ۱۵۰ میلی‌ثانیه ماوسی که فقط رد می‌شه باز هم تولتیپ رو باز می‌کنه و بالای ۲۵۰ میلی‌ثانیه هاور عمداً کند و خراب حس می‌شه.

نویسنده آخر مقاله بحث رو می‌بره سمت قضاوت و سلیقه: هوش مصنوعی یه تولتیپ کاملاً کارا می‌سازه، ولی این آدمه که تصمیم می‌گیره نتیجه صیقل‌خورده هست یا نه. همین الگو رو هم به شکل یه skill برای Claude نوشته که بشه باهاش کدبیس رو بررسی کرد.

نکات کلیدی:

• تأخیر صفر یعنی تولتیپ با عبور تصادفی ماوس باز می‌شه
• تأخیر ثابت ۲۰۰ میلی‌ثانیه‌ای بین چند تریگر کنار هم کند حس می‌شه
• بعد از بسته‌شدن تولتیپ، صفحه ۳۰۰ میلی‌ثانیه «گرم» می‌مونه و تولتیپ بعدی فوری باز می‌شه
• خروج زودهنگام ماوس تایمر رو پاک می‌کنه تا تولتیپ اصلاً باز نشه
• وضعیت گرم‌بودن با ref نگه داشته می‌شه تا رندر دوباره پیش نیاد
• ۲۰۰ میلی‌ثانیه نقطهٔ تعادل بین باز شدن تصادفی و حس کندیه