نکته‌ابزارهای آگاه از موقعیت

هنگام ساختن نکته‌ابزار یا پنجره بالاپر با CSS Anchor Positioning، اگر عنصر از نمای هدف سرریز کند، مرورگر می‌تواند به‌طور خودکار آن را به موقعیت بازگشتی «برگرداند». وقتی این اتفاق می‌افتد، ممکن است بخواهید سبک محتوای موقعیت‌یابی‌شده را تنظیم کنید، مثلاً برای تغییر موقعیت پیکانی که از محتوای موقعیت‌یابی‌شده به لنگر اشاره می‌کند.

پرس‌وجوهای محفظه لنگردار این مشکل را با امکان پرس‌وجو از وضعیت موقعیت‌یابی فعال یک عنصر و اعمال سبک‌ها براساس آن حل می‌کنند. برای موقعیت‌یابی کلی منو کرکره‌ای لنگردار و منو فرعی با وارونه‌سازی برخورد نمای دید (بدون تغییر سبک جهت پیکان)، به منوهای کرکره‌ای آگاه از نمای دید مراجعه کنید.

مشکل

نکته‌ابزاری را تصور کنید که به‌طور پیش‌فرض بالای لنگر خود ظاهر می‌شود. این دکمه پیکانی رو به پایین در پایین دارد. اگر کاربر پیمایش کند و نکته‌ابزار بچرخد تا زیر لنگر ظاهر شود، پیکان اکنون به جهت اشتباه اشاره می‌کند و در سمت اشتباه نکته‌ابزار قرار دارد.

راه‌حل: پُرسمان‌های محتوای لنگردار

با تنظیم container-type: anchored روی عنصر موقعیت‌دار، آن را به محفظه پُرسمانی تبدیل می‌کنید که از وضعیت موقعیت‌دار لنگری خود مطلع است. سپس می‌توانید از پُرسمان @container anchored() برای به‌روزرسانی عناصر کاذب یا فرزندان آن استفاده کنید.

۱. ایجاد نکته‌ابزار و راه‌انداز

از Popover API برای ایجاد نکته‌ابزار استفاده کنید. فراخوانی popover ازطریق popovertarget به‌طور خودکار یک اتصال لنگر ضمنی با دکمه راه‌انداز برقرار می‌کند، بنابراین نیازی به anchor-name یا position-anchor صریح نیست.

<button popovertarget="tooltip" id="anchor" aria-describedby="tooltip">anchor</button>
<div id="tooltip" popover role="tooltip"></div>

سبک‌های حاشیه و تورفتگی پاپ‌اور را برای استفاده با جایگاه‌سازی لنگر بازنشانی کنید، اما فقط درصورتی‌که جایگاه‌سازی لنگر پشتیبانی شود.

@supports (anchor-name: --my-anchor) {
  [popover] {
    inset: auto;
    margin: unset;
  }
}

۲. راه‌اندازی محتوی

container-type: anchored را روی عنصری که درحال جای‌گذاری است اعمال کنید. این عنصر باید position-try-fallbacks تعریف‌شده نیز داشته باشد تا رفتار برگرداندن فعال شود.

#tooltip {
  position: fixed;
  position-area: block-start;
  position-try-fallbacks: flip-block;

  /* Enable anchored container queries */
  container-type: anchored;
}

۳. سبک براساس عقب‌افتاده

وقتی بازگشت خاصی فعال است، از @container anchored(fallback: <value>) برای اعمال سبک‌ها استفاده کنید.

مانند همه پُرسمان‌های محفظه، @container فقط می‌تواند به فرزندان محفظه سبک بدهد. یک استراتژی رایج برای ایجاد فلش‌ها استفاده از شبه‌عناصر ::before و ::after است که به‌عنوان فرزندان در نظر گرفته می‌شوند و می‌توانند مستقیماً سبک‌دهی شوند. بااین‌حال، برای سبک‌دهی به خود نکته‌ابزار (همان‌طور که در مرحله ۴ دیده می‌شود)، یک عنصر فرزند به نکته‌ابزار اضافه می‌کنیم و پیکان را در شبه‌عنصر ::before آن ایجاد می‌کنیم.

<div id="tooltip" popover role="tooltip">
  <div class="tooltip-content">Tooltip</div>
</div>

.tooltip-content::before {
  /* Default "down" arrow for the 'top' position */
  content: "▼";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 1rem;
}

/* Update to an "up" arrow when the 'flip-block' fallback (bottom) is active */
@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

۴. درحال سبک‌بندی خود محتوی

اگر لازم است ویژگی‌های خود محتوی (مانند margin یا background-color) را هنگام برگرداندن تغییر دهید، باید از عنصر پوشاننده داخلی استفاده کنید.

1. container-type: anchored را روی عنصر با موقعیت بیرونی اعمال کنید.
2. عنصر داخلی را در بلوک @container هدف قرار دهید.

@container anchored(fallback: flip-block) {
  .tooltip-content {
    border-radius: 0 0 .5rem .5rem;
    margin-block-start: 0.25rem;
  }
}

روال‌های مطلوب

• ترجیح دادن جایگزین‌های منطقی: از کلیدواژه‌هایی مثل flip-block و flip-inline در position-try-fallbacks برای پُرسمان‌های ساده‌تر استفاده کنید که به‌طور خودکار حالت‌های نوشتاری مختلف و راست‌به‌چپ را مدیریت می‌کنند.
• استفاده از شبه‌عنصرها برای پیکان‌ها: پیکان‌های نکته‌ابزار صرفاً تزئینی هستند و گزینه‌هایی عالی برای ::before یا ::after هستند که می‌توانند ازطریق پرسمان‌های محفظه لنگردار بدون DOM اضافی سبک‌دهی شوند.

راهبردهای جایگزین

موقعیت‌یابی پیکان براساس بازگشت اعمال‌شده یک ارتقای پیش‌رو است و راه دیگری برای واکنش به موقعیت بازگشت وجود ندارد. برای پنهان کردن پیکان در مرورگرهایی که از پرسمان‌های محفظه موقعیت لنگر پشتیبانی نمی‌کنند، پشتیبانی CSS را با @supports (container-type: anchored) آزمایش کنید.

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
  }
}

پشتیبانی مرورگر و بازگشت به حالت قبلی برای Popover

«میانای برنامه‌سازی کاربردی Popover» عمدتاً ارتقای پیش‌رو است، اما رفتارهای تعریف‌کننده آن (ارتقای لایه بالایی، رد کردن با کلیک در خارج از عنصر، و فراخوانی popovertarget) معادل CSS-only ندارند. مرورگرهای قدیمی‌تر به شبیه‌ساز مرورگر نیاز دارند، یا اگر ترجیح می‌دهید شبیه‌ساز مرورگر ارسال نکنید، به بازگشت دستی نیاز دارند.

شبیه‌ساز مرورگر: برای پشتیبانی از مشخصه popover در مرورگرهای قدیمی‌تر، @oddbird/popover-polyfill را به‌صورت شرطی بار کنید. اجباری: ویژگی را با بررسی کردن ویژگی popover در HTMLElement.prototype شناسایی کنید و شبیه‌ساز مرورگر را فقط زمانی بار کنید که پشتیبانی بومی وجود ندارد — آن را بدون قیدوشرط بار نکنید.

با بسته‌بندی یا نقشه واردات:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

بدون بسته‌بندی، از CDN داخل <script type="module"> وارد کنید:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

هشدار سبک‌بندی: شبیه‌ساز مرورگر نمی‌تواند کلاس کاذب واقعی :popover-open را تعریف کند، بنابراین به‌جای آن کلاس .\:popover-open را اعمال می‌کند. اجباری: این دو را با :is() یا :where() ترکیب کنید، درغیراین‌صورت مرورگرهایی که فاقد :popover-open هستند کل قانون را نادیده می‌گیرند:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

یا برای بازگشت به نسخه قدیمی بدون شبیه‌ساز مرورگر، از position: fixed استفاده کنید و مختصات را به‌صورت دستی ازطریق getBoundingClientRect() محاسبه کنید یا به موقعیت‌یابی پیش‌فرض با inset: auto تکیه کنید، اگر این برای مورد استفاده قابل‌قبول باشد.

مرورگرهایی که از Popover API پشتیبانی نمی‌کنند، از موقعیت‌یابی لنگر نیز پشتیبانی نمی‌کنند، بنابراین نکته‌ابزار در مرکز صفحه ظاهر می‌شود.