Popover API से पॉपओवर लागू करना

• ब्राउज़र की मूल सुविधाओं से ही पेज के ऊपर दिखने वाला पॉपओवर UI बनाया जा सकता है, जिससे menu, suggestion और notification जैसे पैटर्न को अधिक consistent तरीके से लागू किया जा सकता है
• Popover API के पॉपओवर हमेशा non-modal होते हैं, इसलिए जिस UI में पेज interaction को रोकना हो, उसके लिए `` अधिक उपयुक्त है
• सरल toggle को popover, popovertarget, popovertargetaction जैसे HTML attributes से संभाला जाता है, और जरूरत पड़ने पर JavaScript methods से display state को control किया जाता है
• ::backdrop, :popover-open, beforetoggle, toggle आदि से style और state changes को संभाला जा सकता है, और interest invokers hover/focus पर display को JavaScript के बिना support करते हैं
• यह जनवरी 2025 से modern devices और browsers पर काम करने वाली Baseline 2025 feature है, लेकिन पुराने environments या कुछ detailed features की compatibility जांचना जरूरी है

---

Popover API जिन समस्याओं को हल करता है

• Popover API दूसरे page content के ऊपर popover content दिखाने के लिए एक standard mechanism देता है
• पॉपओवर को केवल HTML attributes से control किया जा सकता है, और JavaScript API से show/hide state को सीधे manage भी किया जा सकता है
• web पर overlays, popups, popovers, dialogs आदि कहे जाने वाले UI patterns को browser की built-in capability से अधिक consistent तरीके से लागू किया जा सकता है

modal चाहिए तो `` का उपयोग करें

• पॉपओवर UI को मोटे तौर पर modal और non-modal में बांटा जाता है
  • modal में popover दिखने के दौरान बाकी page से interact नहीं किया जा सकता
  • non-modal में popover खुले होने पर भी बाकी page से interact जारी रखा जा सकता है
• Popover API से बनाए गए पॉपओवर हमेशा non-modal होते हैं
• अगर page interaction को रोकने वाला modal popover चाहिए, तो `` element उपयुक्त है
• की तरह पर popover apply करने का तरीका भी valid है, और इससे popover control और dialog semantics साथ में इस्तेमाल किए जा सकते हैं

बुनियादी उपयोग का तरीका

• Popover API अक्सर ऐसे UI में इस्तेमाल हो सकता है जिनमें user interaction चाहिए
  • action menu
  • custom toast notification
  • form element suggestions
  • content selector
  • educational UI
• सिर्फ HTML से एक सरल popover toggle button बनाया जा सकता है

Toggle the popover
Popover content

• JavaScript में HTMLElement.togglePopover() से popover की show/hide state toggle की जाती है
• API popover state changes पर react करने वाले events और styling में मदद करने वाली CSS features भी साथ में देता है

HTML attributes

• interestfor
  • HTML , , elements या SVG element को interest invoker के रूप में define करता है
  • value target element का id होती है, और invoker element पर interest दिखने या गायब होने पर target element प्रभावित होता है
• popover
  • element को popover element में बदलने वाला global attribute है
  • value के रूप में "auto", "hint", "manual" states ले सकता है
• popovertarget
  • या element को popover control button बनाता है
  • value उस popover element की ID होती है जिसे control करना है
• popovertargetaction
  • control button popover पर कौन-सा action करेगा, यह specify करता है
  • संभव values "hide", "show", "toggle" हैं

CSS से display state संभालना

• ::backdrop
  • popover element के ठीक पीछे रखा जाने वाला full-screen pseudo-element है
  • जरूरत होने पर popover के पीछे के page content पर blur जैसा effect दे सकता है
• interest-delay, interest-delay-start, interest-delay-end
  • user द्वारा interest दिखाने या खोने के समय और browser के respond करने के समय के बीच delay जोड़ते हैं
• :interest-source, :interest-target
  • interest दिखे हुए state में invoker और उससे जुड़े target element पर क्रमशः style apply कर सकते हैं
• :popover-open
  • यह pseudo-class केवल तब match होती है जब popover element display में हो
  • open state वाले popover को style करने में इस्तेमाल होती है

JavaScript interfaces और DOM extensions

• InterestEvent
  • interest और loseinterest events का event object है
  • इससे जुड़े interest invoker element का reference रखने वाली source property शामिल होती है
• ToggleEvent
  • popover element के show state और hide state के बीच switch होने पर होने वाले event को represent करता है
  • beforetoggle और toggle events का event object है
• interestForElement
  • interest invoker जिस element को target बनाता है, उसका reference get या set करता है
  • HTMLButtonElement, HTMLAnchorElement, HTMLAreaElement, SVGAElement में इस्तेमाल किया जा सकता है
• HTMLElement.popover
  • JavaScript से element की popover state get या set करता है
  • "auto", "hint", "manual" values का उपयोग करता है और feature detection में भी काम आता है
  • HTML global attribute popover की value को reflect करता है
• popoverTargetElement
  • HTMLButtonElement और HTMLInputElement में control button जिस popover element को control करता है, उसे get या set करता है
  • यह HTML popovertarget attribute की JavaScript counterpart functionality है
• popoverTargetAction
  • HTMLButtonElement और HTMLInputElement में किया जाने वाला popover action get या set करता है
  • "hide", "show", "toggle" values का उपयोग करता है और popovertargetaction attribute को reflect करता है

methods और events

• HTMLElement.hidePopover()
  • popover element को top layer से हटाकर display: none से style करता है और hide करता है
• HTMLElement.showPopover()
  • popover element को top layer में add करके display करता है
• HTMLElement.togglePopover()
  • popover element को show state और hide state के बीच toggle करता है
• beforetoggle
  • popover element की state show और hide के बीच बदलने से ठीक पहले होता है
  • popover opening को रोकने या popover state के अनुसार दूसरे elements update करने के लिए इस्तेमाल किया जा सकता है
• toggle
  • popover element की state बदलने के तुरंत बाद होता है
• interest
  • interest invoker के target element पर interest दिखने पर होता है
• loseinterest
  • interest invoker के target element से interest गायब होने पर होता है

examples और specification links

• Popover API examples: Popover API examples का collection
• interest invoker examples: interest invoker examples का collection
• संबंधित specifications HTML specification के popover, beforetoggle, toggle sections में शामिल हैं
  • HTML # dom-popover
  • HTML # event-beforetoggle
  • HTML # event-toggle

[GN⁺]

Hacker News की राय

• Popover API में अगर CSS Anchor Positioning भी आ जाए, तो यह सच में बड़ा बदलाव ला सकता है
  Anchor Positioning किसी एलिमेंट को पेज के किसी दूसरे एलिमेंट के आधार पर place करने देता है
  Popover API के साथ मिलाने पर custom tooltip या context menu को declarative तरीके से implement किया जा सकता है, और PopperJS जैसी libraries की जरूरत भी नहीं रहेगी
  https://developer.chrome.com/blog/tether-elements-to-each-ot...
  https://popper.js.org/docs/v2/

  • CSS Anchor API के इस्तेमाल पर एक नया लेख अभी-अभी पोस्ट किया है, और यह अगले हफ्ते Chromium में आने वाला है
    https://developer.chrome.com/blog/anchor-positioning-api
  • Browser support की स्थिति यहां देखी जा सकती है
    https://caniuse.com/css-anchor-positioning
  • अगर पिछले कुछ सालों में CSS Anchor Positioning होता, तो शायद बहुत ज्यादा समय बच जाता
  • यही missing key piece है
    पिछले हफ्ते नए Popover API से कुछ बनाकर deploy करने की कोशिश की थी, लेकिन सभी browsers में positioning support की कमी के कारण use cases काफी सीमित हो गए
    लगता है आखिरी browser Firefox भी beta में Anchor Positioning ला चुका है, इसलिए अब ज्यादा समय नहीं लगेगा
  • 2024 में भी HTML/CSS में title जैसा कोई tooltip attribute नहीं है, यह हैरानी की बात है

• अगर modal dialog चाहिए, तो <dialog> element भी है
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

  • Expand/collapse content चाहिए हो, या थोड़ा खींचकर इस्तेमाल करें तो “dropdown” के लिए भी <details> इस्तेमाल किया जा सकता है
    अजीब बात है कि <dialog> या <details> के उलट, <popover> में सिर्फ attribute से declarative तरीके से open state बनाना संभव नहीं लगता
    यह missing feature जैसा लगता है, और उम्मीद है कि इस फैसले के पीछे कोई वजह रही होगी
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...
  • चेतावनी देना चाहूंगा कि animations और सामान्य modal behavior को आजकल की अपेक्षित quality तक लाने के लिए काफी काम करना पड़ता है
    यह पूरी तरह संभव तो है, लेकिन बिल्कुल भी trivial काम नहीं है
  • जैसा बताया गया, animations ज्यादा मुश्किल हैं, लेकिन इसमें accessibility है और Esc key से close करना, built-in backdrop, built-in focus trap support करता है
    Safari support आने में समय लगा था, लेकिन अब इसे हर जगह इस्तेमाल किया जा सकता है
    मुझे लगता है यह खुद tags जोड़कर बनाने से बेहतर है
  • लेख के शुरुआती कुछ paragraphs में यह पहले ही cover किया गया है

• अगर यह host operating system के window system के साथ implement हो, तो यह feature निश्चित रूप से जरूरी लगता है
  क्योंकि अभी popovers की नकल ऐसे तरीकों से करनी पड़ती है जो हमेशा सही काम नहीं करते
  उदाहरण के लिए browser-native <select> browser window की boundary से बाहर तक extend हो सकता है, इसलिए window से कटने की चिंता नहीं करनी पड़ती, लेकिन Quasar जैसे toolkit का fancy fake select ऐसा नहीं कर सकता, जिससे placement options सीमित हो जाते हैं
  सही तरीके से करने के लिए win32 पर हर popover का अपना native HWND होना चाहिए, और Cocoa/macOS पर शायद अपने NSView के अंदर होना चाहिए
  जानना चाहूंगा कि browsers अभी सच में ऐसा implement करते हैं या बस browser window के अंदर overlay draw करते हैं

  • ये popovers बस सामान्य DOM nodes हैं और सामान्य CSS से style किए जाते हैं
    अगर websites को तय viewport के बाहर draw करने की अनुमति दी जाए, तो alert(), confirm(), [title] जैसे बेहद सीमित मामलों को छोड़कर browser या operating system dialogs की विश्वसनीय नकल करना बहुत आसान हो जाएगा
    उदाहरण के लिए page किसी password manager extension के unlock widget की नकल कर सकता है
    यह बड़ा security risk है, और सीमित लाभ की तुलना में इसके लायक नहीं लगता
    यह सिर्फ theoretical चिंता नहीं है
    scammers सालों से browser chrome तक शामिल करने वाली fake popup windows जैसी बेहद विश्वसनीय fake UI बनाते रहे हैं, और उन्हें drag भी किया जा सकता था
    viewport boundary के बाहर draw न कर पाना लगभग इकलौती सीमा थी जिसे वे bypass नहीं कर पाए थे
  • पता नहीं ऐसा feature practically कितना उपयोगी होगा
    छोटे devices पर web browser लगभग हमेशा पूरी screen ढकता है, और बड़े monitors पर भी आमतौर पर कम से कम एक corner को touch कर रहा होता है
  • Semantically भी इसे detect करना आसान हो जाएगा लगता है
    accessibility और crawlability के लिए भी, और जब कोई “popup blocker” plugin बनाना चाहे तब भी उपयोगी होगा
  • Firefox technically page content के कुछ हिस्से को अलग operating-system-level window के रूप में “pop out” कराने की सुविधा support करता है
    यह feature XUL elements के जरिए expose होता है, जिन्हें केवल browser main process में render होने वाले privileged [X]HTML में इस्तेमाल किया जा सकता है
    मुझे नहीं लगता कोई browser developer सामान्य web pages को borderless operating-system windows बनाने की permission देना चाहेगा
  • Web apps को वैसा native window system integration जल्द मिलने की संभावना नहीं लगती जैसी कल्पना की गई है
    कुछ standard controls का ऐसा behave करना इसलिए है क्योंकि वे operating-system-native रूप में implement किए गए हैं, और यह OS-specific implementation side effect है; इन्हें जरूरी नहीं कि इसी तरह implement किया जाए

• ब्राउज़र में built-in popup blocker होते हैं, और ऐसे में इस तरह की API बनाना थोड़ा मज़ाकिया लगता है
  पता है कि इनमें फर्क है, फिर भी बात वही है
  90s के आखिर और 2000s की शुरुआत के popup/popunder wars याद रखने लायक उम्र हो गई है
  लगता है वह लड़ाई हमने जीत ली, लेकिन हमारे ध्यान को लेकर युद्ध अभी बहुत लंबा बाकी है

  • लगता है आप अलग-अलग चीज़ों की तुलना कर रहे हैं
    popover एक floating element है जो ज़रूरत पड़ने पर contextual जानकारी दिखाता है
    आपने जो कहा वह पूरी तरह अलग चीज़ है
  • आपकी बात समझ में आती है, लेकिन असल में ये तुलना करने लायक चीज़ें नहीं लगतीं
    popup OS में कचरा windows फैला देते हैं और सबसे खराब हालत में कंप्यूटर इस्तेमाल करने में ही बाधा बनते हैं
    popover dialog तो tab बंद करते ही खत्म हो जाता है
    इस style के popover जानकारी दिखाने में काफी उपयोगी हैं और हम इन्हें बहुत पहले से इस्तेमाल करते आए हैं
    इन्हें परेशान करने वाले तरीके से इस्तेमाल किया जा सकता है, लेकिन modal की तरह इनके भी कई वास्तविक use cases हैं
  • ऐसी प्रतिक्रिया काफी दिखती है, लेकिन यह थोड़ी बेतुकी है
    अभी भी मौजूदा div आदि से popover implement किए जा सकते हैं
    उदाहरण: https://getbootstrap.com/docs/5.3/components/popovers/
    फर्क बस यह है कि किसी जादुई extra library के बिना popover implement किए जा सकेंगे
    explicit “popover” element को रोक भी दें, तो लोग custom libraries इस्तेमाल करते ही रहेंगे
  • यह popup नहीं है
    लोग popup से इसलिए नफरत करते हैं क्योंकि वे intrusive होते हैं और उनकी अलग window होती है
    यह API div modal की जगह लेकर developer का समय और code कम करती है
  • पारंपरिक popup implementation application content और operating system की सीमा तोड़ता है, और popup blocker उसी को रोकने के लिए होते हैं
    यह API उस सीमा को नहीं तोड़ती
    अगर वह सीमा टूटे तो system की usability और safety घटती है, इसलिए वह दिशा वांछित नहीं है

• कहा गया है, “Popover API से बने popover हमेशा non-modal होते हैं। अगर modal popover बनाना चाहते हैं तो <dialog> element सही है”, लेकिन समझ नहीं आता क्यों
  यह popover का वैध use case है
  खासकर तब जब खुलने पर background को blur किया जाए; और अगर blurred buttons पर user की गलती से click हो सकती है, तो समझ नहीं आता यह function क्यों दिया गया है
  देखने पर पता चला कि दोनों को combine किया जा सकता है
  मतलब, “अगर popover control और dialog semantics को मिलाना चाहते हैं, तो <dialog> element को popover बनाया जा सकता है” जैसा कुछ
  तो यहाँ modal जैसी attribute ज़्यादा समझदारी वाली नहीं लगती?
  क्योंकि use case को साफ तौर पर मान्यता दी जा रही है

  • शायद कई वजहों में से एक यह हो कि <dialog> काफी पहले से मौजूद था

• बहुत अच्छा
  अगर मैंने सही समझा है, तो यह कोई नया feature introduce करने से ज़्यादा उन हिस्सों को सरल बनाता है जहाँ modal div, mask div, container div, और असुविधाजनक positioning CSS की ज़रूरत पड़ती थी
  styling आसान करने वाली pseudo-classes भी जुड़ रही हैं, अच्छा लगा

  • यह basic functionality को JavaScript के बिना इस्तेमाल करने योग्य भी बनाता है
    hidden checkbox को जबरन इस्तेमाल करने की जरूरत नहीं
    styling और animation वाले popover तक JS के बिना कितनी दूर जाया जा सकेगा, पता नहीं, लेकिन focus handling ठीक से करने वाला no-JS support अच्छा है
    कहना चाहूंगा कि accessibility support भी built-in है, लेकिन मौजूदा spec में नहीं मिला
    अगर यह screen reader जैसे accessibility tools को element के बारे में बताने तक संभालता है, तो बहुत मदद मिलेगी
    क्योंकि manually करते समय इसे छोड़ देना काफी आसान है
  • यह API JavaScript के बिना भी DOM में popover element की display state control करने देती है
    निश्चित रूप से उपयोगी है

• Demo: https://mdn.github.io/dom-examples/popover-api

  • nested popover demo में Pizza से Ham तक diagonal movement नहीं हो पाती
    क्योंकि Chrome या Firefox में submenu गायब होने से पहले delay time implement करने वाला कोई नहीं है
    दशकों की user experience research गायब हो गई, और लगभग उम्मीद के मुताबिक ही
    https://mdn.github.io/dom-examples/popover-api/nested-popove...
  • browser support table के मुताबिक यह supported है, लेकिन iOS Safari में काम करता हुआ नहीं लगता

• अच्छा दिखता है, लेकिन इस page में popover क्या होता है यह दिखाने वाली image एक भी क्यों नहीं है, समझ नहीं आता

  • example link है और यहाँ देखा जा सकता है
    https://mdn.github.io/dom-examples/popover-api/
  • image हो तो उपयोगी लगेगा
    interactive example की ओर link है, लेकिन popover की default style बहुत दिलचस्प नहीं लगती
    https://mdn.github.io/dom-examples/popover-api/

• शानदार
  Popper का इस्तेमाल करके Stimulus में बनाया गया custom implementation यहाँ है
  https://github.com/tramlinehq/tramline/blob/main/app/javascr...
  और dialog के लिए implementation यहाँ है
  https://github.com/tramlinehq/tramline/blob/main/app/javascr...