‏تولتیپ‌های تاخیری فقط با HTML و CSS

همه‌چیز از یه پست ابراهیم جاکار شروع شد: اون تو اپلیکیشنش تولتیپ‌هایی می‌خواست که برای هاور تصادفی سریع باز نشن (چون آزاردهنده‌ست) ولی وقتی کاربر پشت سر هم بین چند دکمه هاور می‌کنه، فوری باز بشن. راه‌حل ابراهیم کاملاً تو ری‌اکت بود، با setTimeout و clearTimeout برای نگه داشتن یه استیت «گرم»، به همراه useRef، useState، useEffect و createContext/useContext. کریس کوایر می‌گه لازم نیست این‌همه کد بنویسی؛ میشه کل این رفتارو فقط با HTML و CSS، بدون یه خط جاوااسکریپت، پیاده کرد.

پایه‌ی کار یه Interest Invoker (یعنی ویژگی جدید HTML که هاور یا «علاقه» کاربر به یه المنت رو تشخیص می‌ده) به اسم interestfor هست. کافیه رو دکمه interestfor="tip-1" بذاری و یه span با id="tip-1" و popover="hint" به عنوان تولتیپ تعریف کنی؛ همین دو خط HTML به تنهایی یه تولتیپ کارکردی می‌سازه که با هاور روی دکمه باز و با هاور رفتن بسته می‌شه، بدون هیچ جاوااسکریپتی.

نکته‌ی جالب اینه که وقتی یه popover باز میشه، انکر پیش‌فرضش همون المنتیه که بازش کرده، پس میشه مستقیم از anchor positioning تو CSS استفاده کرد:

[popover] {
  position: fixed;
  position-area: block-start;
}

با position-try: flip-block, flip-inline; هم مشکل خوردن تولتیپ به لبه‌ی صفحه حل می‌شه و خودش جهتشو برمی‌گردونه.

برای همون رفتار «تاخیری بعد فوری» که ابراهیم دنبالش بود، دو خاصیت جدید CSS به اسم interest-delay-start و interest-delay-end وارد بازی می‌شن. با تنظیم تاخیر ۲۰۰ میلی‌ثانیه‌ای روی دکمه، هاور اول کمی صبر می‌کنه، ولی وقتی یکی از تولتیپ‌های همون ناحیه باز باشه، این تاخیر صفر می‌شه تا هاورهای بعدی فوری باز بشن؛ دقیقاً همون منطقی که راه‌حل ری‌اکتی با استیت گرم پیاده می‌کرد:

button {
  interest-delay-start: 200ms;
}
.area:has(:popover-open) button {
  interest-delay-start: 0s;
}

مشکل اینجاست که سافاری هنوز از popover="hint" پشتیبانی نمی‌کنه. برای همچین مرورگرهایی، نویسنده یه فالبک هم نشون می‌ده: با @supports not (interest-delay-start: 0s) یه متغیر CSS به اسم --warm تعریف می‌کنه که با هاور بین صفر و یک تغییر می‌کنه و با تاخیر تو transition، همون افکت گرم‌شدن رو شبیه‌سازی می‌کنه؛ یعنی حتی بدون ساپورت مرورگر هم میشه به همین نتیجه رسید، فقط با کد بیشتر.

نکات کلیدی:

• راه‌حل با HTML و CSS جای پیاده‌سازی ری‌اکتی با useState/useEffect/useRef/useContext رو می‌گیره
• interestfor و popover="hint" پایه‌ی تشخیص هاور و نمایش تولتیپ هستن
• interest-delay-start و interest-delay-end تایمینگ باز شدن تولتیپ رو کنترل می‌کنن
• سافاری هنوز popover="hint" رو ساپورت نمی‌کنه؛ فالبک با متغیر CSS --warm جبرانش می‌کنه
• انکر پیش‌فرض popover همون المنت بازکننده‌ست، پس anchor positioning و position-try مستقیم کار می‌کنن