पोपोवर्स

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

अवलोकन

पॉपओवर प्लगइन के उपयोग करय के समय जानय के बात:

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

किछु उदाहरणक संग पोपोवर कोना काज करैत अछि से देखबाक लेल पढ़ैत रहू।

जेना : सब ठाम पोपोवर सक्षम करू

कोनो पृष्ठ पर सभ पॉपओवर के आरंभ करबाक एकटा तरीका ई होयत जे ओकरा ओकर 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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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)

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ 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…
})