পারসিস্টেন্ট অ্যাপ ট্যুর তৈরি করা হচ্ছে

অনবোর্ডিং ট্যুরের জন্য ওভারলে প্রয়োজন হয় যা ব্যবহারকারী হাইলাইট করা ফিচারের সাথে ইন্টার‍্যাক্ট করার সময়ও থেকে যায়। অটো পপওভারের মতো, ব্যবহারকারী পৃষ্ঠার অন্য কোথাও ক্লিক করলে ম্যানুয়াল পপওভার বন্ধ হয় না। CSS অ্যাঙ্কর পজিশনিংয়ের সাথে popover="manual" কম্বাইন করলে, আপনি নন-মডেল, টেথারড ট্যুর স্টেপ তৈরি করতে পারবেন।

প্রয়োগ সংক্রান্ত সাজেশন

HTML

<div id="feature-target">Highlight this feature</div>

<!-- MANDATORY: Enforce overlay dialog semantics and accessible name bindings -->
<div id="tour-step" popover="manual" role="dialog" aria-labelledby="tour-title">
  <!-- Assume an <h1> precedes this element in the full document outline -->
  <h2 id="tour-title">Step 1</h2>
  <p>Learn how to use this feature.</p>
  <button popovertarget="tour-step" popovertargetaction="hide">Got it</button>
</div>

CSS

#feature-target {
  anchor-name: --feature-target;
}

#tour-step {
  popover: manual;
  position-anchor: --feature-target;
  position-area: right center;
  inset: auto;
  margin: 1rem;
  padding: 1rem;
  border: 1px solid blue;
  border-radius: 0.5rem;
  background: aliceblue;
}

জাভাস্ক্রিপ্ট

const tourStep = document.getElementById('tour-step');
tourStep.showPopover();
// MANDATORY: Programmatically route focus into the non-modal popover so keyboard/assistive technology users immediately perceive the new context
tourStep.querySelector('button').focus();

প্রয়োগ সংক্রান্ত নির্দেশিকা

• বাধ্যতামূলক: ব্যবহারকারীর ইন্টার‍্যাকশনের সময় ট্যুর স্টেপ যাতে ভুলবশত বন্ধ না হয়ে যায় তার জন্য popover="manual" ব্যবহার করুন।
• বাধ্যতামূলক: কন্টেনারটি role="dialog" দিয়ে চিহ্নিত করুন এবং aria-labelledby-এর মাধ্যমে এর শিরোনাম লিঙ্ক করুন।
• বাধ্যতামূলক: ফোকাস যাতে সরে না যায় তার জন্য পপওভার খোলার সাথে সাথেই প্রোগ্রাম্যাটিক ফোকাস পপওভারের মধ্যে শিফ্ট করুন।
• অবশ্যই CSS অ্যাঙ্কর পজিশনিং ব্যবহার করে ট্যুরের ধাপটি নির্দিষ্ট ফিচারের সাথে যুক্ত করুন।
• পপওভারে popovertargetaction="hide" ব্যবহার করে "বন্ধ করুন" বা "পরবর্তী" বোতাম স্পষ্টভাবে দেখাতে হবে।

ফলব্যাক স্ট্র্যাটেজি

পপওভারের জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট

পপওভার API মূলত প্রোগ্রেসিভ এনহ্যান্সমেন্ট, তবে এর সংজ্ঞায়িত আচরণ — টপ-লেয়ার প্রোমোশন, লাইট-ডিসমিস এবং popovertarget ইনভোকেশন — শুধুমাত্র CSS-এর সমতুল্য নয়। পুরনো ব্রাউজারের ক্ষেত্রে পলিফিল বা ম্যানুয়াল ফলব্যাক প্রয়োজন হয়, যদি আপনি কোনওটিই শিপ করতে না চান।

Polyfill: পুরনো ব্রাউজারে popover অ্যাট্রিবিউট কাজ করানোর জন্য, শর্তসাপেক্ষে @oddbird/popover-polyfill লোড করুন। বাধ্যতামূলক: HTMLElement.prototype-এ popover প্রপার্টি চেক করে ফিচার শনাক্ত করুন এবং নেটিভ সাপোর্ট না থাকলে শুধুমাত্র তখনই পলিফিল লোড করুন — শর্তহীনভাবে এটি লোড করবেন না।

বান্ডলার বা ইমপোর্ট ম্যাপের মাধ্যমে:

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

বান্ডলার ছাড়া, <script type="module">-এর মধ্যে CDN থেকে ইমপোর্ট করুন:

<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-এর সাথে ডিফল্ট পজিশনিংয়ের উপর নির্ভর করুন।

অ্যাঙ্কর-পজিশনিং

অ্যাঙ্কর পজিশনিং ছাড়া ব্রাউজারকে সাপোর্ট করতে, আপনি পলিফিল বা পিওর CSS ফলব্যাক ব্যবহার করার মধ্যে থেকে বেছে নিতে পারবেন।

বিকল্প ১: পলিফিল ফলব্যাক

অ্যাঙ্কর পজিশনিং এমুলেট করতে @oddbird/css-anchor-positioning পলিফিল ব্যবহার করা যেতে পারে। এটি ইমপ্লিসিট অ্যাঙ্কর সাপোর্ট করে না, তাই আপনাকে ট্রিগারে এক্সপ্লিসিট অ্যাঙ্করের নাম যোগ করতেই হবে। এছাড়াও, পলিফিল দ্বারা পপওভারে position-area কাজ করে না, তাই আপনাকে position-area-এর পরিবর্তে কাঙ্ক্ষিত ইনসেটে অবশ্যই anchor() ব্যবহার করতে হবে।

<script type="module">
  if (!CSS.supports('anchor-name: --foo')) {
    await import("https://unpkg.com/@oddbird/css-anchor-positioning");
  }
</script>

#tour-step {
  /* If using the anchor positioning polyfill with a popover, DO use `anchor()` functions instead of `position-area`. */
  left: anchor(right);
  top: anchor(top);
}

বিকল্প ২: নন-পলিফিল CSS ফলব্যাক

আপনি পলিফিল ব্যবহার করতে না চাইলে, @supports not ব্যবহার করে ভিউপোর্টের নিচে একটি নির্দিষ্ট পজিশনে টুলটিপ ডিফল্ট করতে পারেন।

@supports not (anchor-name: --foo) {
  #tour-step {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
}