इस पेज का अनुवाद Cloud Translation API से किया गया है.

पॉपओवर = हिंट

Keith Cirkel

Mason Freed

पब्लिश करने की तारीख: 26 फ़रवरी, 2025

Chrome 133 में, पॉपओवर की मौजूदा सुविधा के साथ एक नया मोड जोड़ा गया है: popover="hint". ब्राउज़र से मैनेज किए जाने वाले इस मोड की मदद से, स्टैकिंग का नया कॉन्टेक्स्ट चालू किया जा सकता है. इससे टूलटिप और कुछ समय के लिए दिखने वाले मिलते-जुलते फ़्लोटिंग एलिमेंट बनाना आसान हो जाता है. इससे डिज़ाइन में बदलाव करने की सुविधा बनी रहती है और डेवलपर को कम मेहनत करनी पड़ती है.

परिचय और इतिहास

Popover API, Chrome 114 में लॉन्च किया गया. इसकी मदद से, मेन्यू और टूलटिप जैसे ऐक्सेस किए जा सकने वाले फ़्लोटिंग यूज़र इंटरफ़ेस (यूआई) बनाए जा सकते हैं. डिफ़ॉल्ट रूप से, popover="auto" आपके लिए लाइट-डिसमिज़ फ़ंक्शन और फ़ोकस मैनेजमेंट को मैनेज करता है. इसके लिए, आपको अतिरिक्त स्क्रिप्टिंग की ज़रूरत नहीं होती. इस बारे में ज़्यादा जानने के लिए, Introducing the Popover API लेख पढ़ें. popover="auto" पॉप-ओवर खोलने पर, popover="auto" वाले सभी अन्य पॉप-ओवर बंद हो जाएंगे. इससे एर्गोनॉमिक एपीआई बनता है, जो सबसे सही काम करता है.

पॉपओवर, दूसरे पॉपओवर को बंद कर रहे हैं

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

इस उदाहरण में, popover 2 खोलने पर popover 1 बंद हो जाएगा, क्योंकि popover="auto" एक बार में सिर्फ़ एक पॉपओवर खोलने की अनुमति देता है.

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

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

डेवलपर रिसर्च की मदद से, हमने स्टैकिंग के दो सामान्य कॉन्टेक्स्ट की पहचान की है:

पर्सिस्टेंट यूज़र इंटरफ़ेस (यूआई): उदाहरण के लिए, मेन्यू और डायलॉग.
कुछ समय के लिए दिखने वाला यूज़र इंटरफ़ेस (यूआई): उदाहरण के लिए, होवरकार्ड और टूलटिप.

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

नई वैल्यू का व्यवहार

popover="auto" और popover="hint", दोनों कम से कम इंटरैक्शन के साथ खारिज करने की सुविधा के साथ काम करते हैं. इसका मतलब है कि जब उपयोगकर्ता इनके बाहर क्लिक करता है या कीबोर्ड पर Esc दबाता है, तो ये अपने-आप बंद हो जाते हैं. इस मामले में, दोनों स्टाइल एक जैसे हैं.

जब अन्य पॉपओवर को जबरदस्ती छिपाने की बात आती है, तो popover="auto" खुलने पर सभी अन्य auto और hint पॉपओवर बंद कर देता है. इससे यह पक्का होता है कि एक बार में सिर्फ़ एक ऐसा पॉपओवर चालू हो. हालांकि, नेस्ट किए गए पॉपओवर के लिए यह नियम लागू नहीं होता. इनके बारे में यहां बताया गया है. दूसरी ओर, popover="hint", सिर्फ़ अन्य hint पॉपओवर को ज़बरदस्ती छिपा देता है. इससे मेन्यू और टूलटिप खुले रहते हैं और साथ-साथ काम करते हैं.

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

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

	`popover="auto"`	`popover="hint"`	`popover="manual"`
लाइट बंद करना	हां	हां	नहीं
ज़बरदस्ती छिपाने के लिए:	आपस में कोई संबंध नहीं रखने वाले `auto` और `hint`	काम के नहीं `hint`	Nothing
नेस्टिंग:	हां	खास (इसके बारे में पहले बताया गया है)	लागू नहीं—रोशनी बंद करने की सुविधा नहीं है

कर्सर घुमाने पर ट्रिगर होना

टूलटिप और होवरकार्ड के लिए, होवर ट्रिगर होना एक सामान्य UX पैटर्न है. किसी दिलचस्प एलिमेंट पर कुछ समय के लिए कर्सर घुमाने पर, होवरकार्ड दिखता है. फ़िलहाल, इस तरह के व्यवहार को JavaScript के ज़रिए लागू करना ज़रूरी है. उदाहरण के लिए, mouseenter और mouseleave इवेंट के लिए लिसनर जोड़कर. हालांकि, एक और एपीआई पर काम चल रहा है, जिससे कर्सर घुमाने पर ट्रिगर होने वाली कार्रवाई को एलान के तौर पर दिखाया जा सकेगा: Interest Invokers API.

इस एपीआई पर अब भी काम जारी है. हालांकि, आम तौर पर, कई तरह के एलिमेंट में interesttarget नाम का एट्रिब्यूट जोड़ने का मकसद है. इससे, उन एलिमेंट पर कर्सर घुमाने पर ट्रिगर होने वाला व्यवहार मिलता है:

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span>

ऊपर दिए गए एचटीएमएल के साथ, <a> लिंक पर कर्सर घुमाने पर, my-hovercard पॉपओवर अपने-आप दिखेगा. उस एलिमेंट से कर्सर हटाने पर, पॉपओवर छिप जाएगा. यह सब बिना JavaScript के!

उदाहरण

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}

इस उदाहरण में, popover="hint" का इस्तेमाल करके एक बुनियादी टूलटिप बनाया गया है. माउस से बटन पर कर्सर घुमाने पर, यह टूलटिप बटन के बारे में ज़्यादा जानकारी देता है. इवेंट हैंडलर, mouseenter और mouseleave के लिए, कर्सर घुमाने पर ट्रिगर होने की सुविधा देते हैं. इसमें 0.5 सेकंड की देरी होती है. ध्यान दें कि इस उदाहरण में कुछ जानकारी शामिल नहीं की गई है:

पॉपओवर पर कर्सर घुमाने से, ट्रिगर करने वाले एलिमेंट से कर्सर हटाने पर पॉपओवर बंद नहीं होता. इसलिए, उदाहरण के लिए, पॉपओवर से टेक्स्ट को कॉपी या चिपकाया नहीं जा सकता.
इसमें "डिबाउंसिंग" नहीं होती: बटन पर कुछ सेकंड के लिए कर्सर घुमाने पर, पॉपओवर ट्रिगर हो जाता है. भले ही, देरी खत्म होने से पहले ही बटन से कर्सर हटा दिया गया हो. इस मामले में, टूलटिप तुरंत खुलता और बंद होता है.
उदाहरण को ऐक्सेस नहीं किया जा सकता: जो उपयोगकर्ता माउस का इस्तेमाल नहीं करता वह टूलटिप का कॉन्टेंट ऐक्सेस नहीं कर सकता.

इन कमियों को अतिरिक्त JavaScript की मदद से ठीक किया जा सकता है. उदाहरण के लिए, focus (या शायद keydown और keyup) इवेंट हैंडलर को जोड़ना होगा, ताकि पॉपओवर को कीबोर्ड से चालू किया जा सके. टूलटिप को ऐक्सेस करने के लिए, जिन चीज़ों को सही तरीके से मैनेज करना ज़रूरी है उनके बारे में जानने के लिए, सारा हिगली की यह बेहतरीन ब्लॉग पोस्ट पढ़ें. इन सभी समस्याओं (और अन्य) को Interest Invokers API, अपने-आप मैनेज करेगा.

ज़्यादा जानें

ज़्यादा जानकारी के लिए, सुविधा के बारे में जानकारी या एचटीएमएल की खास जानकारी देखें.