ऐप्लिकेशन के लिए पर्सिस्टेंट टूर बनाना

शामिल होने के टूर के लिए, ऐसे ओवरले की ज़रूरत होती है जो हाइलाइट की गई सुविधाओं के साथ उपयोगकर्ताओं के इंटरैक्ट करने के दौरान बने रहें. अपने-आप दिखने वाले पॉपओवर के उलट, मैन्युअल पॉपओवर तब बंद नहीं होते, जब उपयोगकर्ता पेज पर कहीं और क्लिक करता है. popover="manual" को सीएसएस ऐंकर पोज़िशनिंग के साथ इस्तेमाल करके, नॉन-मोडल और टेथर्ड टूर स्टेप बनाए जा सकते हैं.

लागू करने के सुझाव

एचटीएमएल

<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>

सीएसएस

#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;
}

JavaScript

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 से लिंक करें.
• ज़रूरी: पॉपओवर खुलने के तुरंत बाद, प्रोग्रामैटिक फ़ोकस को पॉपओवर के अंदर शिफ़्ट करें, ताकि फ़ोकस न छूटे.
• टूर के चरण को उस सुविधा से जोड़ने के लिए सीएसएस ऐंकर पोज़िशनिंग का इस्तेमाल करें जिसके बारे में बताया जा रहा है.
• popovertargetaction="hide" का इस्तेमाल करने वाले पॉपओवर में, "बंद करें" या "आगे बढ़ें" बटन ज़रूर दें.

फ़ॉलबैक रणनीतियां

पॉपओवर के लिए फ़ॉलबैक और ब्राउज़र की सुविधा

Popover API ज़्यादातर प्रोग्रेसिव एन्हांसमेंट है. हालांकि, इसके मुख्य व्यवहार — टॉप-लेयर प्रमोशन, लाइट-डिसमिस, और popovertarget को शुरू करना — सिर्फ़ सीएसएस के बराबर नहीं हैं. पुराने ब्राउज़र के लिए, polyfill की ज़रूरत होती है. अगर आपको 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"> में सीडीएन से इंपोर्ट करें:

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

स्टाइलिंग से जुड़ी चेतावनी: polyfill, असल :popover-open स्यूडो-क्लास को तय नहीं कर सकता. इसलिए, यह इसके बजाय .\:popover-open क्लास लागू करता है. ज़रूरी: दोनों को :is() या :where() के साथ जोड़ें. ऐसा न करने पर, जिन ब्राउज़र में :popover-open नहीं है वे पूरे नियम को खारिज कर देते हैं:

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

इसके अलावा, बिना polyfill के लेगसी फ़ॉलबैक के लिए, position: fixed का इस्तेमाल करें और getBoundingClientRect() की मदद से मैन्युअल तरीके से निर्देशांकों का हिसाब लगाएं. इसके अलावा, अगर इस्तेमाल के उदाहरण के लिए यह स्वीकार्य है, तो inset: auto के साथ डिफ़ॉल्ट पोज़िशनिंग का इस्तेमाल करें.

anchor-positioning

ऐंकर पोज़िशनिंग की सुविधा के बिना काम करने वाले ब्राउज़र के लिए, polyfill या प्योर सीएसएस फ़ॉलबैक का इस्तेमाल किया जा सकता है.

पहला विकल्प: पॉलीफ़िल फ़ॉलबैक

@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);
}

दूसरा विकल्प: नॉन-पॉलीफ़िल सीएसएस फ़ॉलबैक

अगर आपको पॉलीफ़िल का इस्तेमाल नहीं करना है, तो @supports not का इस्तेमाल करके, टूलटिप को व्यूपोर्ट के सबसे नीचे एक तय जगह पर डिफ़ॉल्ट रूप से सेट किया जा सकता है.

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