Source

Popovers

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

अवलोकन

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

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

यस कम्पोनेन्टको एनिमेसन प्रभाव prefers-reduced-motionमिडिया क्वेरीमा निर्भर हुन्छ। हाम्रो पहुँच कागजातको घटाइएको गति खण्ड हेर्नुहोस् ।

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>होइन , र तपाईंले एट्रिब्यूट <button>पनि समावेश गर्नुपर्छ ।tabindex

<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=""

नाम टाइप गर्नुहोस् पूर्वनिर्धारित विवरण
एनिमेसन बुलियन सत्य पपओभरमा CSS फेड ट्रान्जिसन लागू गर्नुहोस्
कन्टेनर स्ट्रिङ | तत्व | गलत गलत

पपओभरलाई विशेष तत्वमा जोड्छ। उदाहरण container: 'body':। यो विकल्प विशेष गरी उपयोगी छ कि यसले तपाईंलाई ट्रिगर गर्ने तत्वको नजिक कागजातको प्रवाहमा पपओभर राख्न अनुमति दिन्छ - जसले पपओभरलाई सञ्झ्याल रिसाइज गर्दा ट्रिगर गर्ने तत्वबाट टाढा जानबाट रोक्छ।

सामग्री स्ट्रिङ | तत्व | समारोह ''

data-contentयदि विशेषता अवस्थित छैन भने पूर्वनिर्धारित सामग्री मान ।

यदि एक प्रकार्य दिइएको छ भने, यो thisपपओभर संलग्न भएको तत्वमा सेट गरिएको सन्दर्भको साथ बोलाइनेछ।

ढिला नम्बर | वस्तु

पपओभर (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन

यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ

वस्तु संरचना हो:delay: { "show": 500, "hide": 100 }

html बुलियन गलत पपओभरमा HTML घुसाउनुहोस्। यदि गलत छ भने, textDOM मा सामग्री सम्मिलित गर्न jQuery को विधि प्रयोग गरिनेछ। यदि तपाईं XSS आक्रमणहरूको बारेमा चिन्तित हुनुहुन्छ भने पाठ प्रयोग गर्नुहोस्।
नियुक्ति स्ट्रिङ | समारोह 'सही'

कसरी popover स्थिति - auto | शीर्ष | तल | बायाँ | सही।
जब autoनिर्दिष्ट गरिन्छ, यसले गतिशील रूपमा पपओभरलाई पुन: दिशा दिनेछ।

जब एक प्रकार्य स्थान निर्धारण गर्न प्रयोग गरिन्छ, यसलाई पहिलो तर्कको रूपमा popover DOM नोड र ट्रिगर गर्ने तत्व DOM नोडलाई दोस्रो रूपमा बोलाइन्छ। thisसन्दर्भ popover उदाहरणमा सेट गरिएको छ ।

चयनकर्ता स्ट्रिङ | गलत गलत यदि चयनकर्ता प्रदान गरिएको छ भने, पपओभर वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ। अभ्यासमा, यो गतिशील एचटीएमएल सामग्रीलाई पपओभरहरू थप्न सक्षम गर्न प्रयोग गरिन्छ। योएक जानकारीमूलक उदाहरण हेर्नुहोस् ।
टेम्प्लेट तार '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

पपओभर सिर्जना गर्दा प्रयोग गर्नको लागि आधार HTML।

पपओभरमा titleइन्जेक्सन गरिनेछ .popover-header

पपओभरमा contentइन्जेक्सन गरिनेछ .popover-body

.arrowपपओभरको तीर बन्नेछ।

.popoverसबैभन्दा बाहिरी र्यापर तत्वमा वर्ग हुनुपर्छ ।

शीर्षक स्ट्रिङ | तत्व | समारोह ''

titleयदि विशेषता अवस्थित छैन भने पूर्वनिर्धारित शीर्षक मान ।

यदि एक प्रकार्य दिइएको छ भने, यो thisपपओभर संलग्न भएको तत्वमा सेट गरिएको सन्दर्भको साथ बोलाइनेछ।

ट्रिगर तार 'क्लिक' कसरी पपओभर ट्रिगर हुन्छ - क्लिक गर्नुहोस् | होभर | फोकस | म्यानुअल। तपाईले धेरै ट्रिगरहरू पास गर्न सक्नुहुन्छ; तिनीहरूलाई स्पेसको साथ अलग गर्नुहोस्। manualकुनै अन्य ट्रिगर संग संयोजन गर्न सकिदैन।
अफसेट नम्बर | तार यसको लक्ष्य सापेक्ष popover को अफसेट। थप जानकारीको लागि Popper.js अफसेट कागजातहरू हेर्नुहोस् ।
फलब्याक प्लेसमेन्ट स्ट्रिङ | array 'फ्लिप' पप्परले फलब्याकमा प्रयोग गर्ने स्थिति निर्दिष्ट गर्न अनुमति दिनुहोस्। थप जानकारीको लागि Popper.js को व्यवहार कागजातहरू हेर्नुहोस्
सीमा स्ट्रिङ | तत्व 'स्क्रोल अभिभावक' पपओभरको ओभरफ्लो अवरोध सीमा। 'viewport', 'window', 'scrollParent', वा HTMLElement सन्दर्भ (जाभास्क्रिप्ट मात्र) को मानहरू स्वीकार गर्दछ । थप जानकारीको लागि Popper.js को preventOverflow कागजातहरू हेर्नुहोस् ।

व्यक्तिगत popovers लागि डाटा विशेषताहरू

व्यक्तिगत पोपोभरका लागि विकल्पहरू वैकल्पिक रूपमा डेटा विशेषताहरूको प्रयोग मार्फत निर्दिष्ट गर्न सकिन्छ, माथि वर्णन गरिए अनुसार।

विधिहरू

एसिन्क्रोनस विधि र संक्रमण

सबै एपीआई विधिहरू एसिन्क्रोनस छन् र एक संक्रमण सुरु गर्नुहोस् । तिनीहरू संक्रमण सुरु हुने बित्तिकै तर यो समाप्त हुनु अघि कलरमा फर्कन्छन् । थप रूपमा, ट्रान्जिसनिङ कम्पोनेन्टमा विधि कललाई बेवास्ता गरिनेछ

थप जानकारीको लागि हाम्रो जाभास्क्रिप्ट कागजात हेर्नुहोस्

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

घटनाहरू

घटना प्रकार विवरण
show.bs.popover showउदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ ।
देखाइएको.bs.popover पपओभर प्रयोगकर्ताको लागि दृश्यात्मक बनाइएपछि यो घटना निकालिन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
hide.bs.popover यो घटना तुरुन्तै निकालिएको छ जब hideउदाहरण विधि कल गरिएको छ।
hidden.bs.popover पपओभर प्रयोगकर्ताबाट लुकाउन सकिएपछि यो घटना हटाइन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
inserted.bs.popover show.bs.popoverDOM मा पपओभर टेम्प्लेट थपिएको घटना पछि यो घटना निकालिन्छ।
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})