Popovers

बुटस्ट्र्याप पोपोभरहरू थप्नका लागि दस्तावेज र उदाहरणहरू, जस्तै iOS मा पाइने, तपाईंको साइटको कुनै पनि तत्वमा।

अवलोकन

पपओभर प्लगइन प्रयोग गर्दा जान्नुपर्ने कुराहरू:

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

popovers केहि उदाहरणहरु संग काम कसरी हेर्न को लागी पढ्न जारी राख्नुहोस्।

उदाहरण: सबै ठाउँमा popovers सक्षम गर्नुहोस्

एक पृष्ठमा सबै popovers प्रारम्भ गर्न एक तरिका तिनीहरूलाई तिनीहरूको data-toggleविशेषता द्वारा चयन गर्न हुनेछ:

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

उदाहरण: containerविकल्प प्रयोग गर्दै

जब तपाइँसँग एक अभिभावक तत्वमा केहि शैलीहरू छन् जुन पपओभरमा हस्तक्षेप गर्दछ, तपाइँ एक अनुकूलन निर्दिष्ट गर्न चाहानुहुन्छ containerताकि पपओभरको HTML त्यस तत्व भित्र देखा पर्दछ।

$(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>

प्रयोग

जाभास्क्रिप्ट मार्फत popovers सक्षम गर्नुहोस्:

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-animation=""।

विधिहरू

$().popover(options)

तत्व सङ्कलनका लागि popovers प्रारम्भ गर्दछ।

.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')

तत्वको पपओभर देखाउन सक्ने क्षमता दिन्छ। Popovers पूर्वनिर्धारित रूपमा सक्षम छन्।

$('#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…
})