पॉपओवर एपीआई को बेसलाइन में दिखाया गया है

Una Kravets

समय आ गया है! मुझे जिस सुविधा का सबसे ज़्यादा इंतज़ार था वह सभी आधुनिक ब्राउज़र पर आ गई है. यह सुविधा, आधिकारिक तौर पर Baseline 2024 का हिस्सा है. यह सुविधा पॉपओवर एपीआई है. पॉपओवर, टूलटिप, मेन्यू, टीचिंग यूज़र इंटरफ़ेस वगैरह जैसे लेयर वाले इंटरफ़ेस बनाने के लिए, डेवलपर को कई बेहतरीन प्राइमिटिव और सुविधाएं देता है.

पॉपओवर की सुविधाओं की कुछ खास बातें:

• टॉप लेयर में प्रमोशन. पॉपओवर, पेज के बाकी हिस्से के ऊपर टॉप लेयर में दिखेंगे. इसलिए, आपको z-index के साथ कुछ करने की ज़रूरत नहीं है.
• लाइट को बंद करने की सुविधा. पॉपओवर के बाहर क्लिक करने से, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
• फ़ोकस मैनेजमेंट की डिफ़ॉल्ट सेटिंग. पॉपओवर खोलने पर, अगला टैब स्टॉप पॉपओवर में दिखता है.
• सुलभ कीबोर्ड बाइंडिंग. esc बटन दबाने या दो बार टॉगल करने पर, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
• ऐक्सेस किए जा सकने वाले कॉम्पोनेंट बाइंडिंग. किसी पॉपओवर एलिमेंट को, पॉपओवर ट्रिगर से सेमेटिक तरीके से कनेक्ट करना.

पॉपओवर बनाना

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

• सबसे पहले, उस एलिमेंट पर popoverएट्रिब्यूट सेट करें जो पॉपओवर होगा.
• इसके बाद, पॉपओवर एलिमेंट पर कोई यूनीक id जोड़ें.
• आखिर में, बटन को पॉपओवर से जोड़ने के लिए, बटन के popovertargetको पॉपओवर एलिमेंट के id की वैल्यू पर सेट करें.

यह नीचे दिए गए कोड में दिखाया गया है:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

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

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

पॉपओवर बनाम मोडल डायलॉग

आपको शायद यह जानना हो कि डायलॉग मौजूद होने पर, पॉपओवर की ज़रूरत है या नहीं. इसका जवाब है: शायद ज़रूरत न हो.

यह ध्यान रखना ज़रूरी है कि पॉपओवर एट्रिब्यूट, अपने-आप सेमेटिक्स नहीं देता. अब पॉपओवर का इस्तेमाल करके, मॉडल डायलॉग जैसे अनुभव बनाए जा सकते हैं. हालांकि, इन दोनों के बीच कुछ मुख्य अंतर हैं:

नतीजा और ज़्यादा पढ़ने के लिए

popover, प्लैटफ़ॉर्म पर कई शानदार सुविधाएं उपलब्ध कराता है. इस एपीआई के बारे में ज़्यादा जानने के लिए, यहां कुछ सुझाव दिए गए हैं. इनमें इस सुविधा के ऐक्सेस के बारे में ज़्यादा जानकारी के साथ-साथ, सुविधा सेट के दस्तावेज़ भी शामिल हैं:

• सेमेटिक्स और पॉपओवर एट्रिब्यूट: कब किसका इस्तेमाल करना है? Hidde de Vries की लेख
• पॉपओवर की सुलभता के बारे में: ब्राउज़र क्या करता है और क्या नहीं करता, Hidde de Vries की लेख
• पॉपओवर के बारे में MDN दस्तावेज़