पोपोवर्स के नाम से जानल जाला
आईओएस में पावल जाए वाला बूटस्ट्रैप पॉपओवर नियर आपके साइट पर कौनों भी तत्व में जोड़े खातिर दस्तावेजीकरण आ उदाहरण।
पॉपओवर प्लगइन के इस्तेमाल करत घरी जानल जरूरी चीज:
- पोपोवर्स पोजीशनिंग खातिर 3rd पार्टी लाइब्रेरी Popper.js पर निर्भर बा । रउआँ के bootstrap.js से पहिले popper.min.js
bootstrap.bundle.min.js
के शामिल करे के पड़ी या / के इस्तेमाल करे के पड़ीbootstrap.bundle.js
जेह में Popper.js बा ताकि popovers काम करे! - पोपोवर्स के निर्भरता के रूप में टूलटिप प्लगइन के जरूरत होला।
- अगर रउआ हमनी के जावास्क्रिप्ट स्रोत से बनावत बानी त एकरा खातिर
util.js
. - पोपोवर्स प्रदर्शन के कारण ऑप्ट-इन होला, एहसे रउआ खुद एकरा के इनिशियलाइज करे के होई .
- जीरो-लंबाई
title
आcontent
मान कबो पोपोवर ना देखावेला. - अधिक जटिल घटक सभ में रेंडरिंग के समस्या से बचे खातिर निर्दिष्ट करीं
container: 'body'
(जइसे कि हमनी के इनपुट समूह, बटन समूह इत्यादि)। - छिपल तत्वन पर पोपोवर के ट्रिगर कइल काम ना करी.
- पोपोवर खातिर
.disabled
याdisabled
तत्व सभ के एगो रैपर तत्व पर ट्रिगर कइल जरूरी बा। - जब कई लाइन सभ के पार लपेटे वाला एंकर सभ से ट्रिगर कइल जाई तब पोपोवर सभ के एंकर सभ के समग्र चौड़ाई के बीच केंद्रित कइल जाई। एह व्यवहार से बचे खातिर
.text-nowrap
अपना एस पर इस्तेमाल करीं .<a>
- पोपोवर के डीओएम से ओकर संबंधित तत्व हटावे से पहिले छिपावे के पड़ी।
पढ़त रहीं कि कुछ उदाहरण का साथे पोपोवर कइसे काम करेला.
पन्ना पर सभ पॉपओवर सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के data-toggle
बिसेसता के आधार पर चुनल जाय:
जब रउआँ के लगे कौनों पैरेंट तत्व पर कुछ स्टाइल होखे जे कौनों पॉपओवर में बाधा डाले लें, रउआँ कौनों कस्टम निर्दिष्ट कइल चाहब container
ताकि पॉपओवर के एचटीएमएल एकरे बजाय ओह तत्व के भीतर लउके।
चार गो विकल्प उपलब्ध बा: ऊपर, दाहिना, नीचे, आ बाएँ संरेखित।
focus
टॉगल तत्व से अलग तत्व के उपयोगकर्ता के अगिला क्लिक पर पॉपओवर के खारिज करे खातिर ट्रिगर के इस्तेमाल करीं।
अगिला क्लिक पर खारिज करे खातिर बिसेस मार्कअप के जरूरत बा
सही क्रॉस-ब्राउजर आ क्रॉस-प्लेटफॉर्म व्यवहार खातिर, रउआँ के टैग के इस्तेमाल करे के पड़ी, <a>
टैग के ना ,<button>
आ रउआँ के एगो tabindex
एट्रिब्यूट भी शामिल करे के पड़ी।
एट्रिब्यूट वाला तत्व disabled
इंटरैक्टिव ना होलें, मने कि प्रयोगकर्ता लोग पोपोवर (या टूलटिप) के ट्रिगर करे खातिर होवर भा क्लिक ना क सके ला। एगो वर्कअराउंड के रूप में, रउआँ एगो रैपर से पॉपओवर के ट्रिगर कइल चाहब <div>
या आ अक्षम तत्व पर के <span>
ओवरराइड कइल चाहब।pointer-events
अक्षम पॉपओवर ट्रिगर सभ खातिर, आप ई भी पसंद कर सकत बानी data-trigger="hover"
कि पॉपओवर आपके प्रयोगकर्ता लोग के ओतने तुरंत बिजुअल फीडबैक लउके काहें से कि ऊ लोग अक्षम तत्व पर क्लिक करे के उमेद ना कर सके ला।
जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करीं:
विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-
, जइसे कि में data-animation=""
।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
एनीमेशन के बारे में बतावल गइल बा | बूलियन के बा | सच | पोपोवर पर एगो सीएसएस फेड संक्रमण लागू करीं |
कंटेनर के बा | तार के बा | तत्व के बारे में बतावल गइल बा | गलत | गलत | पोपोवर के एगो विशिष्ट तत्व में जोड़ देला। उदाहरण खातिर : |
सामग्री | तार के बा | तत्व के बारे में बतावल गइल बा | परोजन | '' के बा। |
अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर |
देरी | नंबर के बा | वस्तु | 0 के बा | पोपोवर देखावे आ छिपावे में देरी (ms) - मैनुअल ट्रिगर प्रकार पर लागू ना होला अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा: |
एचटीएमएल के बा | बूलियन के बा | गलत | पोपोवर में एचटीएमएल डालल जाला। अगर गलत बा, त jQuery के text तरीका के इस्तेमाल DOM में सामग्री डाले खातिर कइल जाई। अगर रउरा एक्सएसएस हमला से चिंतित बानी त पाठ के इस्तेमाल करीं. |
प्लेसमेंट के बा | तार के बा | परोजन | 'ठीक' | पोपोवर के पोजीशन कईसे कईल जाला - ऑटो | ऊपर के बा | नीचे के बा | छोड़ के बा | ठीक. जब कौनों फंक्शन के इस्तेमाल प्लेसमेंट के निर्धारण करे खातिर कइल जाला तब ओकरा के पॉपओवर DOM नोड के पहिला आर्गुमेंट के रूप में आ ट्रिगरिंग एलिमेंट DOM नोड के दूसरा के रूप में बोलावल जाला। |
चयनकर्ता के बा | तार के बा | गलत | गलत | अगर कौनों चयनकर्ता उपलब्ध करावल गइल होखे तब पोपोवर ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई। ब्यवहार में एकर इस्तेमाल डायनामिक एचटीएमएल सामग्री के पॉपओवर जोड़े में सक्षम बनावे खातिर कइल जाला। ई आ एगो जानकारी भरल उदाहरण देखल जाव . |
टेम्पलेट के बारे में बतावल गइल बा | डोरी | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
पोपोवर बनावे के समय इस्तेमाल करे खातिर एचटीएमएल के आधार बनाईं। पोपोवर के पोपोवर के
सबसे बाहरी रैपर तत्व में |
हक | तार के बा | तत्व के बारे में बतावल गइल बा | परोजन | '' के बा। |
अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर |
ट्रिगर | डोरी | 'क्लिक करे' के बा। | पोपोवर कइसे ट्रिगर होला - क्लिक करीं | होवर करे के बा | फोकस करे के बा | हाथ से कईल. रउआँ कई गो ट्रिगर पास कर सकेनी; एकरा के एगो जगह से अलगा कर दीं. manual कवनो दोसरा ट्रिगर से ना जोड़ल जा सके. |
ऑफसेट हो गइल बा | नंबर के बा | डोरी | 0 के बा | अपना लक्ष्य के सापेक्ष पोपोवर के ऑफसेट। अधिक जानकारी खातिर Popper.js के ऑफसेट डॉक्स देखल जाय । |
fallbackप्लेसमेंट के बा | तार के बा | सरणी के बा | 'पलटी' | ई बतावे के अनुमति दीं कि पॉपर फॉलबैक पर कवना स्थिति के इस्तेमाल करी. अधिक जानकारी खातिर Popper.js के व्यवहार डॉक्स देखल जाय |
सीमा के बा | तार के बा | तत्त्व | 'स्क्रॉलपैरेंट' के बा। | पोपोवर के ओवरफ्लो बाधा सीमा। 'viewport' , 'window' , 'scrollParent' , या कौनों HTMLElement संदर्भ (केवल जावास्क्रिप्ट) के मान स्वीकार करे ला । अधिक जानकारी खातिर Popper.js के preventOverflow डॉक्स देखल जाय । |
अलग-अलग पोपोवर खातिर डेटा विशेषता
अलग-अलग पॉपओवर सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला, जइसे कि ऊपर बतावल गइल बा।
एसिंक्रोनस तरीका आ संक्रमण के बारे में बतावल गइल बा
सभ एपीआई विधि एसिंक्रोनस होला आ एगो संक्रमण शुरू होला . संक्रमण शुरू होते ही उ लोग फोन करे वाला के पास वापस आ जाला लेकिन खतम होखे से पहिले . एकरा अलावा, एगो संक्रमण घटक पर एगो मेथड कॉल के अनदेखी कइल जाई .
एगो तत्व संग्रह खातिर पोपोवर के आरंभ करे ला।
एगो तत्व के पोपोवर के खुलासा करेला। पॉपओवर के वास्तव में देखावे से पहिले (यानी shown.bs.popover
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के “मैनुअल” ट्रिगरिंग मानल जाला. पोपोवर जिनहन के टाइटिल आ सामग्री दुनों शून्य लंबाई के होखे, कबो ना देखावल जाला।
कवनो तत्व के पोपोवर के छिपा देला। पॉपओवर के वास्तव में छिपावे से पहिले (यानी hidden.bs.popover
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के “मैनुअल” ट्रिगरिंग मानल जाला.
कवनो तत्व के पॉपओवर के टॉगल करेला। पॉपओवर के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.popover
या hidden.bs.popover
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के “मैनुअल” ट्रिगरिंग मानल जाला.
कवनो तत्व के पोपोवर के छिपा के नष्ट कर देला. डेलिगेशन के इस्तेमाल करे वाला पोपोवर सभ (जे विकल्प के इस्तेमाल सेselector
बनावल जालें ) के वंशज ट्रिगर तत्व सभ पर अलग-अलग नष्ट ना कइल जा सके ला।
कवनो तत्व के पोपोवर के देखावे के क्षमता देला। पोपोवर डिफ़ॉल्ट रूप से सक्षम बा।
कवनो तत्व के पोपोवर देखावे के क्षमता हटा देला। पोपोवर के तबे देखावल जा सकेला जब ओकरा के फेर से सक्षम कइल जाव.
कवनो तत्व के पॉपओवर के देखावे भा छिपावे खातिर क्षमता के टॉगल करे ला।
कवनो तत्व के पॉपओवर के स्थिति अपडेट करेला।
घटना के प्रकार बा | बिबरन |
---|---|
show.bs.popover के बा | show इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
देखावल गइल.bs.popover | ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता के देखाई देवे वाला बनावल जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
छिपावे के.बी.एस.पोपओवर के बा | ई इवेंट तुरंत फायर हो जाला जब hide इंस्टेंस मेथड के कॉल हो जाला। |
छिपल.बीएस.गरीबी के बा | ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
डालल गइल बा.बीएस.गरीब | ई इवेंट ओह show.bs.popover इवेंट के बाद फायर कइल जाला जब पॉपओवर टेम्पलेट के DOM में जोड़ दिहल जाला। |