पोपोवर्स के नाम से जानल जाला

आईओएस में पावल जाए वाला बूटस्ट्रैप पॉपओवर नियर आपके साइट पर कौनों भी तत्व में जोड़े खातिर दस्तावेजीकरण आ उदाहरण।

अवलोकन कइल जाव

पॉपओवर प्लगइन के इस्तेमाल करत घरी जानल जरूरी चीज:

• पोपोवर्स पोजीशनिंग खातिर 3rd पार्टी लाइब्रेरी पॉपर पर निर्भर बा । रउआँ के bootstrap.js से पहिले popper.min.jsbootstrap.bundle.min.js के शामिल करे के पड़ी या / के इस्तेमाल करे के पड़ी जेह में Popper bootstrap.bundle.jsहोखे ताकि पॉपओवर काम कर सके!
• पोपोवर्स के निर्भरता के रूप में टूलटिप प्लगइन के जरूरत होला।
• अगर रउआ हमनी के जावास्क्रिप्ट स्रोत से बनावत बानी त एकरा खातिरutil.js .
• पोपोवर्स प्रदर्शन के कारण ऑप्ट-इन होला, एहसे रउआ खुद एकरा के इनिशियलाइज करे के होई .
• जीरो-लंबाई titleआ contentमान कबो पोपोवर ना देखावेला.
• अधिक जटिल घटक सभ में रेंडरिंग के समस्या से बचे खातिर निर्दिष्ट करीं container: 'body'(जइसे कि हमनी के इनपुट समूह, बटन समूह इत्यादि)।
• छिपल तत्वन पर पोपोवर के ट्रिगर कइल काम ना करी.
• पोपोवर खातिर .disabledया disabledतत्व सभ के एगो रैपर तत्व पर ट्रिगर कइल जरूरी बा।
• जब कई लाइन सभ के पार लपेटे वाला एंकर सभ से ट्रिगर कइल जाई तब पोपोवर सभ के एंकर सभ के समग्र चौड़ाई के बीच केंद्रित कइल जाई। एह व्यवहार से बचे खातिर .text-nowrapअपना एस पर इस्तेमाल करीं .<a>
• पोपोवर के डीओएम से ओकर संबंधित तत्व हटावे से पहिले छिपावे के पड़ी।
• छाया डोम के अंदर के एगो तत्व के बदौलत पोपोवर्स के ट्रिगर कइल जा सके ला।

पढ़त रहीं कि कुछ उदाहरण का साथे पोपोवर कइसे काम करेला.

उदाहरण खातिर: हर जगह पोपोवर सक्षम करीं

पन्ना पर सभ पॉपओवर सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के data-toggleबिसेसता के आधार पर चुनल जाय:

$(function () {
  $('[data-toggle="popover"]').popover()
})

उदाहरण : containerविकल्प के प्रयोग कइल जा रहल बा

जब रउआँ के लगे कौनों पैरेंट तत्व पर कुछ स्टाइल होखे जे कौनों पोपोवर में बाधा डाले लें, रउआँ कौनों कस्टम निर्दिष्ट कइल चाहब containerताकि पॉपओवर के एचटीएमएल एकरे बजाय ओह तत्व के भीतर लउके।

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

उदाहरण

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

चार गो दिशा-निर्देश बा

चार गो विकल्प उपलब्ध बा: ऊपर, दाहिना, नीचे, आ बाएँ संरेखित।

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

अगिला क्लिक पर खारिज कर दीं

focusटॉगल तत्व से अलग तत्व के उपयोगकर्ता के अगिला क्लिक पर पॉपओवर के खारिज करे खातिर ट्रिगर के इस्तेमाल करीं।

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

अक्षम तत्वन के बा

एट्रिब्यूट वाला तत्व disabledइंटरैक्टिव ना होलें, मने कि प्रयोगकर्ता लोग पोपोवर (या टूलटिप) के ट्रिगर करे खातिर होवर भा क्लिक ना क सके ला। एगो वर्कअराउंड के रूप में, रउआँ एगो रैपर से पॉपओवर के ट्रिगर कइल चाहब <div>या आ अक्षम तत्व पर के <span>ओवरराइड कइल चाहब।pointer-events

अक्षम पॉपओवर ट्रिगर सभ खातिर, आप ई भी पसंद कर सकत बानी data-trigger="hover"कि पॉपओवर आपके प्रयोगकर्ता लोग के ओतने तुरंत बिजुअल फीडबैक लउके काहें से कि ऊ लोग अक्षम तत्व पर क्लिक करे के उम्मीद ना कर सके ला।

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

प्रयोग के बारे में बतावल गइल बा

जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करीं:

$('#example').popover(options)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-animation=""।

विधियन के बारे में बतावल गइल बा

$().popover(options)

एगो तत्व संग्रह खातिर पोपोवर के आरंभ करे ला।

.popover('show')

एगो तत्व के पोपोवर के खुलासा करेला। पॉपओवर के वास्तव में देखावे से पहिले (यानी shown.bs.popoverघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के “मैनुअल” ट्रिगरिंग मानल जाला. पोपोवर जिनहन के टाइटिल आ सामग्री दुनों शून्य लंबाई के होखे, कबो ना देखावल जाला।

$('#element').popover('show')

.popover('hide')

कवनो तत्व के पोपोवर के छिपा देला। पॉपओवर के वास्तव में छिपावे से पहिले (यानी hidden.bs.popoverघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के “मैनुअल” ट्रिगरिंग मानल जाला.

$('#element').popover('hide')

.popover('toggle')

कवनो तत्व के पॉपओवर के टॉगल करेला। पॉपओवर के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.popoverया hidden.bs.popoverघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के “मैनुअल” ट्रिगरिंग मानल जाला.

$('#element').popover('toggle')

.popover('dispose')

कवनो तत्व के पोपोवर के छिपा के नष्ट कर देला. डेलिगेशन के इस्तेमाल करे वाला पोपोवर सभ (जे विकल्प के इस्तेमाल सेselector बनावल जालें ) के वंशज ट्रिगर तत्व सभ पर अलग-अलग नष्ट ना कइल जा सके ला।

$('#element').popover('dispose')

.popover('enable')

कवनो तत्व के पोपोवर के देखावे के क्षमता देला। पोपोवर डिफ़ॉल्ट रूप से सक्षम बा।

$('#element').popover('enable')

.popover('disable')

कवनो तत्व के पोपोवर देखावे के क्षमता हटा देला। पोपोवर के तबे देखावल जा सकेला जब ओकरा के फेर से सक्षम कइल जाव.

$('#element').popover('disable')

.popover('toggleEnabled')

कवनो तत्व के पॉपओवर के देखावे भा छिपावे खातिर क्षमता के टॉगल करे ला।

$('#element').popover('toggleEnabled')

.popover('update')

कवनो तत्व के पॉपओवर के स्थिति अपडेट करेला।

$('#element').popover('update')

घटनाक्रम के बारे में बतावल गइल बा

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})