‏تولتیپ با تأخیر، فقط با HTML و CSS

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

پایهٔ کارش دوتا قابلیت تازهٔ خود پلتفرم وبه: صفت interestfor روی دکمه که «interest» (یعنی همون علاقه نشون دادن کاربر به یه المان، عملاً هاور) رو به یه المان دیگه وصل می‌کنه، و popover="hint" روی خود تولتیپ. به گفتهٔ نویسنده همین HTML خالی، بدون هیچ اسکریپتی، یه تولتیپ کارراه‌انداز می‌ده: موس رو ببری روش باز می‌شه، برداری بسته می‌شه.

<button interestfor="tip-1" aria-labelledby="tip-1">
  <svg ...></svg>
</button>
<span id="tip-1" popover="hint">I'm the tooltip.</span>

نکتهٔ خوب بعدی اینه که وقتی یه popover باز می‌شه، انکر پیش‌فرضش همون المانیه که بازش کرده. برای همین با anchor positioning فقط با position-area: block-start تولتیپ بالای دکمه می‌شینه، و position-try: flip-block, flip-inline هم حواسش به لبهٔ صفحه هست و اگه جا نبود خودش تولتیپ رو می‌چرخونه اون طرف. یعنی تشخیص لبه که تو نسخهٔ جاوااسکریپتی کد می‌خواد، اینجا مجانی به‌دست میاد.

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

button {
  interest-delay-start: 200ms;
  interest-delay-end: 150ms;
}

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

تنها ایراد کار پشتیبانی مرورگرهاست؛ سافاری هنوز popover="hint" رو نداره و نویسنده هم قبول داره این یه امتیاز برای راه‌حل جاوااسکریپتیه. برای همین یه fallback با @supports not می‌سازه: یه متغیر --warm که عملاً صفر یا یکه و روی هاور با تأخیر عوض می‌شه، بعد transition-delay تولتیپ از روی همون متغیر حساب می‌شه. رفتار همونه، فقط کدش بیشتره.

نکات کلیدی:

• صفت interestfor به‌همراه popover="hint" بدون هیچ جاوااسکریپتی یه تولتیپ کامل می‌سازه.
• interest-delay-start و interest-delay-end تأخیر باز و بسته شدن تولتیپ رو مستقیم تو CSS تعیین می‌کنن.
• سلکتور .area:has(:popover-open) button تأخیر شروع رو صفر می‌کنه؛ همون حالت «warmed» راه‌حل ری‌اکتی.
• انکر پیش‌فرض popover همون المان بازکننده‌ست، پس position-area و position-try جای‌گذاری و تشخیص لبه رو حل می‌کنن.
• سافاری هنوز popover="hint" رو پشتیبانی نمی‌کنه؛ fallback با @supports not و متغیر --warm همون رفتار رو می‌ده.