‏جای تولتیپ رو حالا خود CSS پیدا می‌کنه

نویسنده با یه کد آشنا شروع می‌کنه: با getBoundingClientRect() مختصات دکمه رو می‌گیری و top و left تولتیپ رو دستی تنظیم می‌کنی. مشکل اینه که با اسکرول یا تغییر اندازهٔ پنجره همه‌چی به هم می‌ریزه و اگه تولتیپ پایین صفحه باشه نصفش بیرون می‌زنه. بعد مجبوری listener اضافه کنی یا یه کتابخونه بیاری. به گفتهٔ نویسنده، الان CSS همهٔ اینا رو بدون جاوااسکریپت حل می‌کنه.

اصل ماجرا دو تا property هست. به المنتی که می‌خوای چیزی بهش بچسبه یه anchor-name می‌دی (یعنی یه اسم که المنت دیگه بتونه بهش اشاره کنه). بعد المنت دوم با position-anchor به اون اسم وصل می‌شه:

.note {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: bottom;
}

این فقط روی المنت‌هایی کار می‌کنه که absolute یا fixed هستن، و مرورگر موقع اسکرول و resize جاشونو خودش دوباره حساب می‌کنه. با position-area هم به‌جای حساب کردن فاصله با calc() فقط می‌گی کجا باشه، مثلاً bottom یا bottom span-right.

یه نکته که نویسنده می‌گه ممکنه اولش گیرت بندازه: anchor-name لازم نیست توی کل صفحه یکتا باشه، ولی برای هر جفت anchor و هدفش باید یکتا باشه. اگه توی یه گرید کارت، همهٔ تولتیپ‌ها یه اسم داشته باشن، همه‌شون به آخرین کارتی می‌چسبن که اون اسمو گرفته. پس باید برای هر کارت یه اسم جدا بسازی.

بخشی که واقعاً کد کم می‌کنه position-try-fallbacks هست. با مقدار flip-block, flip-inline، اگه تولتیپ از صفحه بیرون بزنه مرورگر خودش اونو به طرف دیگه می‌بره. اگه این رو با attribute بومی popover ترکیب کنی، یه منوی کشویی کامل داری: popover المنت رو توی top layer می‌ذاره (یعنی بالای همه‌چی، بدون دعوا با z-index) و با کلیک بیرون خودش بسته می‌شه. با width: anchor-size(width) هم عرض منو دقیقاً هم‌اندازهٔ دکمه می‌شه.

نویسنده تأکید می‌کنه که anchor positioning فقط می‌گه یه چیز «کجا» باشه، نه «کی» نشون داده بشه. وقتی اصطلاح و یادداشتش توی DOM کنار هم نیستن، با :has() روی والد مشترکشون نمایش رو کنترل کرده. قاعدهٔ کلیش اینه: اگه چیزی رو نسبت به یه المنت دیگه جا می‌دی از anchor استفاده کن، ولی برای جا دادن نسبت به والد خودش همون position: relative و absolute کافیه.

نکات کلیدی:

• anchor-name و position-anchor یه المنت رو بدون جاوااسکریپت به المنت دیگه می‌چسبونن.
• position-try-fallbacks: flip-block, flip-inline وقتی جا نباشه تولتیپ رو خودکار برمی‌گردونه.
• ترکیب با popover یعنی top layer و بسته شدن با کلیک بیرون، مجانی.
• anchor-size(width) عرض منو رو هم‌اندازهٔ دکمه می‌کنه.
• پشتیبانی توی Chrome، Firefox، Safari و Edge خوبه، ولی Safari و Chrome سر بعضی حالت‌های fallback با هم فرق دارن و margin پیش‌فرض popover باید ریست بشه.
• برای مرورگرهای قدیمی fallback با @supports not (anchor-name: --a) رو نگه دار.
• رابطهٔ anchor فقط بصریه و screen reader محتوا رو به ترتیب DOM می‌خونه؛ aria-describedby فقط بخشی از مشکل رو حل می‌کنه.