कर्सर घुमाने पर टूलटिप दिखाना

वेब सुविधाएं: इंटरेस्ट इन्वोकर पॉपओवर popover="hint" ऐंकर पोज़िशनिंग

उपयोगकर्ता, कॉन्टेक्स्ट को पूरी तरह से बदले बिना, उससे जुड़ी अतिरिक्त जानकारी देखना चाहते हैं. जब कोई उपयोगकर्ता ज़्यादा जानकारी पाने में दिलचस्पी रखता है, तब टूलटिप दिखाना मददगार हो सकता है. इससे किसी शब्द की परिभाषा दी जा सकती है, सिर्फ़ आइकॉन वाले बटन से होने वाली कार्रवाई के बारे में बताया जा सकता है या फ़ॉर्म फ़ील्ड के बारे में ज़्यादा जानकारी दी जा सकती है.

टूलटिप बनाना

popover="hint" एट्रिब्यूट को <div> या किसी अन्य सही एलिमेंट में जोड़कर, अपनी ज़रूरत के हिसाब से पॉपओवर बनाया जा सकता है. जब उपयोगकर्ता टूलटिप खोलता है, तो इससे अन्य popover="hint" टूलटिप छिप जाते हैं. हालांकि, auto या manual टूलटिप नहीं छिपते. यह नेस्ट किए गए टूलटिप को खारिज करने की सुविधा भी देता है.

यह लाइट डिसमिस करने की सुविधा भी देता है. इससे, जब कोई उपयोगकर्ता पॉपओवर के बाहर क्लिक करता है या फ़ोकस करता है, तो पॉपओवर खारिज हो जाता है.

टूलटिप एलिमेंट में, यूनीक वैल्यू वाला id एट्रिब्यूट होना चाहिए:

<!-- MANDATORY: The tooltip container `<div>` must have a `popover` attribute.
     the value of `"hint"` ensures it can be "light dismissed". -->
<div popover="hint" id="tooltip">Tooltip content</div>

जब कोई उपयोगकर्ता <a> या <button> एलिमेंट पर कर्सर घुमाता है या उस पर फ़ोकस करता है, तो इसका मतलब है कि उसे ज़्यादा जानकारी चाहिए. एलिमेंट में एक interestfor एट्रिब्यूट होना चाहिए, जो टूलटिप के id एट्रिब्यूट से मेल खाता हो.

<!-- The `interestfor` attribute can be applied to a `<button>` element: -->
<button interestfor="tooltip">Tooltip trigger</button>

<!-- The `interestfor` attribute can also be applied to an `<a>` element: -->
<a interestfor="tooltip" href="">Tooltip trigger</a>

ट्रिगर में एक विज़ुअल इंडिकेटर होना चाहिए, जिससे पता चले कि ट्रिगर के साथ इंटरैक्ट करने पर ज़्यादा जानकारी उपलब्ध है.

interestfor में पहले से मौजूद सुलभता सुविधाएं

interestfor का इस्तेमाल करने पर, ब्राउज़र आपके लिए सहायक टेक्नोलॉजी की वायरिंग को मैनेज करता है:

  • इंप्लिसिट सिमैंटिक: popover="hint" वाले टारगेट को tooltip का इंप्लिसिट मिनिमम रोल मिलता है. role="tooltip" को खुद सेट न करें.
  • इंप्लिसिट असोसिएशन: ब्राउज़र, सोर्स एलिमेंट को टारगेट के साथ इंप्लिसिट तरीके से जोड़ता है. अगर टारगेट सादा टेक्स्ट है, तो aria-describedby के ज़रिए और अगर टारगेट में इंटरैक्टिव कॉन्टेंट है, तो aria-details के ज़रिए जोड़ा जाता है. ट्रिगर में aria-describedby या aria-details न जोड़ें.
  • इंटरैक्टिव कॉन्टेंट: ज़रूरत पड़ने पर असोसिएशन, aria-details पर स्विच हो जाता है.इसलिए, टारगेट में इंटरैक्टिव कॉन्टेंट शामिल करने की अनुमति है. उदाहरण के लिए, "दिलचस्पी वाले कार्ड" में मौजूद लिंक.

सुलभता से जुड़ी पाबंदियां (डब्ल्यूसीएजी 1.4.13)

interestfor के ऊपर दिए गए सिमैंटिक को हैंडल करने के बावजूद, आपके लागू किए गए तरीके को डब्ल्यूसीएजी 1.4.13 (कॉन्टेंट पर कर्सर घुमाने या फ़ोकस करने पर) का पालन करना ज़रूरी है:

  • खारिज किया जा सके: उपयोगकर्ताओं के पास टूलटिप को खारिज करने का विकल्प होना चाहिए.इसके लिए, उन्हें पॉइंटर को घुमाने या कीबोर्ड फ़ोकस का इस्तेमाल करने की ज़रूरत नहीं पड़नी चाहिए. उदाहरण के लिए, Escape बटन दबाकर. नेटिव popover एट्रिब्यूट, इस बाइंडिंग को अपने-आप मैनेज करता है.
  • होवर किया जा सके: पॉइंटर को टूलटिप के कॉन्टेंट पर ले जाने पर, टूलटिप गायब नहीं होना चाहिए. इससे, ज़ूम करने वाले टूल का इस्तेमाल करने वाले लोग, टूलटिप टेक्स्ट को सुरक्षित तरीके से पढ़ पाते हैं.
  • लगातार दिखना: टूलटिप तब तक दिखना चाहिए, जब तक कर्सर को घुमाने या फ़ोकस ट्रिगर को हटाया नहीं जाता, उपयोगकर्ता उसे साफ़ तौर पर खारिज नहीं करता या उसका कॉन्टेंट अब मान्य नहीं रहता.

टूलटिप की पोज़िशन तय करना

टूलटिप को सीएसएस ऐंकर पोज़िशनिंग का इस्तेमाल करके पोज़िशन किया जाता है. interestfor का इस्तेमाल करके टूलटिप खोलने पर, ट्रिगर एलिमेंट अपने-आप पॉपओवर के लिए इंप्लिसिट ऐंकर बन जाता है.

नेटिव ऐंकर पोज़िशनिंग की सुविधा वाले मॉडर्न ब्राउज़र में, आपको ट्रिगर पर anchor-name या टूलटिप पर position-anchor तय करने की ज़रूरत नहीं होती. position-area का इस्तेमाल करके, टूलटिप को सीधे उसके इंप्लिसिट ऐंकर के हिसाब से पोज़िशन किया जा सकता है. साथ ही, position-try-fallbacks का इस्तेमाल करके, कोलिज़न फ़्लिपिंग को मैनेज किया जा सकता है:

[popover] {
  /* Implicit anchor from interestfor: no anchor-name or position-anchor needed */
  position-area: top;
  position-try-fallbacks: flip-block;
  margin: unset;
}

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

इंटरेस्ट इन्वोकर के लिए फ़ॉलबैक और ब्राउज़र की सुविधा

दिलचस्पी के आधार पर ट्रिगर होने वाले इवेंट को, NPM के interestfor पॉलीफ़िल पैकेज का इस्तेमाल करके, शर्त के साथ पॉलीफ़िल किया जाना चाहिए. सीडीएन का इस्तेमाल करने के बजाय, पॉलीफ़िल को बंडल करें.

ज़रूरी: HTMLButtonElement.prototype पर interestForElement प्रॉपर्टी की जांच करके, सुविधा का पता लगाएं. साथ ही, नेटिव सपोर्ट मौजूद न होने पर ही polyfill लोड करें.

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

सीएसएस पॉलीफ़िल से जुड़ी चेतावनियां

पॉलीफ़िल का इस्तेमाल करने पर, सीएसएस एपीआई में थोड़ा बदलाव होता है. ऐसा नेटिव स्यूडो-क्लास और प्रॉपर्टी के काम न करने की वजह से होता है:

  • Pseudo-classes: Polyfill, असल :interest-source और :interest-target pseudo-classes को तय नहीं कर सकता. इसलिए, यह इसके बजाय .interest-source और .interest-target क्लास लागू करता है. ज़रूरी: नेटिव और पॉलीफ़िल, दोनों स्थितियों के साथ काम करने के लिए, उन्हें :is() के साथ जोड़ें.
/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }
  • सीएसएस प्रॉपर्टी: interest-delay, interest-delay-start, और interest-delay-end के लिए, पॉलीफ़िल को सीएसएस वैरिएबल का इस्तेमाल करना ज़रूरी है. ऐसा इसलिए, क्योंकि यह सभी ब्राउज़र में कस्टम प्रॉपर्टी को सीधे तौर पर नहीं पढ़ सकता.
/* Adjust the start and end delay for interest invokers */
[interestfor] {
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}

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

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 के साथ डिफ़ॉल्ट पोज़िशनिंग का इस्तेमाल करें.

popover-polyfill, उन ब्राउज़र में हिंट के व्यवहार को पॉलीफ़िल नहीं करता है जो popover के साथ काम करते हैं, लेकिन popover="hint" के साथ नहीं. इन ब्राउज़र के लिए, फ़ोकस करके खोला गया टूलटिप तब भी खुला रह सकता है, जब कर्सर घुमाकर दूसरा टूलटिप खोला जाए.

ऐंकर पोज़िशनिंग की सुविधा के बिना काम करने वाले ब्राउज़र के लिए, @oddbird/css-anchor-positioning polyfill का इस्तेमाल किया जा सकता है. इसके अलावा, फ़ॉलबैक पोज़िशन तय करने के लिए, @supports का इस्तेमाल किया जा सकता है.

लेगसी ब्राउज़र के साथ काम करने के लिए @oddbird/css-anchor-positioning polyfill का इस्तेमाल करते समय, ध्यान रखें कि polyfill, इंप्लिसिट ऐंकर या पॉपओवर पर position-area के साथ काम नहीं करता. ट्रिगर पर साफ़ तौर पर anchor-name सेट करें, पॉपओवर पर position-anchor सेट करें, और position-area के बजाय anchor() इनसेट फ़ंक्शन का इस्तेमाल करके पोज़िशन सेट करें: 

<!-- MANDATORY: Conditionally install the anchor positioning polyfill -->
<script type="module">
  if (!("anchorName" in document.documentElement.style)) {
    await import("https://unpkg.com/@oddbird/css-anchor-positioning");
  }
</script>

button[interestfor="tooltip-attrs"] {
  /* MANDATORY: Each trigger and popover pair must have a unique anchor name, referenced by `anchor-name` on the trigger and `position-anchor` on the popover. */
  anchor-name: --tooltip-attrs;
}
#tooltip-attrs {
  position-anchor: --tooltip-attrs;
  /* If using the anchor positioning polyfill with a popover, DO use `anchor()` functions, and not `position-area. */
  top: anchor(bottom);
  left: anchor(right);
  margin: unset;
}