Popovers

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

अवलोकन

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

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

पूर्वनिर्धारित रूपमा, यो कम्पोनेन्टले बिल्ट-इन सामग्री सेनिटाइजर प्रयोग गर्दछ, जसले स्पष्ट रूपमा अनुमति नभएको कुनै पनि HTML तत्वहरूलाई बाहिर निकाल्छ। थप विवरणहरूको लागि हाम्रो JavaScript कागजातमा सेनिटाइजर खण्ड हेर्नुहोस् ।

यस कम्पोनेन्टको एनिमेसन प्रभाव 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="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>होइन , र तपाईंले एट्रिब्यूट <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)

GPU त्वरण

GPU एक्सेलेरेसन र परिमार्जित प्रणाली DPI को कारण Windows 10 यन्त्रहरूमा कहिलेकाहीं Popovers धमिलो देखिन्छ। v4 मा यसको लागि समाधान भनेको तपाईको popovers मा आवश्यकता अनुसार GPU एक्सेलेरेशन असक्षम गर्नु हो।

सुझाव गरिएको समाधान:

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

किबोर्ड र सहायक टेक्नोलोजी प्रयोगकर्ताहरूका लागि पपओभर काम गर्ने

किबोर्ड प्रयोगकर्ताहरूलाई तपाईंको पपओभरहरू सक्रिय गर्न अनुमति दिन, तपाईंले तिनीहरूलाई HTML तत्वहरूमा मात्र थप्नु पर्छ जुन परम्परागत रूपमा किबोर्ड-केन्द्रित र अन्तरक्रियात्मक (जस्तै लिङ्कहरू वा फारम नियन्त्रणहरू) छन्। यद्यपि स्वेच्छाचारी HTML तत्वहरू (जस्तै <span>s) विशेषता थपेर फोकसयोग्य बनाउन सकिन्छ tabindex="0", यसले किबोर्ड प्रयोगकर्ताहरूका लागि गैर-अन्तर्क्रियात्मक तत्वहरूमा सम्भावित कष्टप्रद र भ्रामक ट्याब स्टपहरू थप्नेछ, र धेरै सहयोगी प्रविधिहरूले हाल यस अवस्थामा पपओभरको सामग्री घोषणा गर्दैनन्। । थप रूपमा, तपाइँको popovers को लागी ट्रिगर को रूप मा मात्र भर पर नगर्नुहोस् hover, किनकि यसले किबोर्ड प्रयोगकर्ताहरु को लागी ट्रिगर गर्न असम्भव बनाउँछ।

जब तपाइँ विकल्पको साथ पपओभरहरूमा समृद्ध, संरचित HTML सम्मिलित गर्न सक्नुहुन्छ html, हामी दृढताका साथ सिफारिस गर्दछौं कि तपाइँ सामग्रीको अत्यधिक मात्रा थप्नबाट जोगिन। aria-describedbyहाल पोपोभरहरूले काम गर्ने तरिका यो हो कि, एक पटक प्रदर्शित भएपछि, तिनीहरूको सामग्री विशेषताको साथ ट्रिगर तत्वसँग जोडिएको छ । नतिजा स्वरूप, पपओभरको सम्पूर्ण सामग्रीलाई सहयोगी प्रविधि प्रयोगकर्ताहरूलाई एक लामो, निर्बाध स्ट्रिमको रूपमा घोषणा गरिनेछ।

थप रूपमा, जब तपाइँको पपओभरमा अन्तरक्रियात्मक नियन्त्रणहरू (जस्तै फारम तत्वहरू वा लिङ्कहरू) समावेश गर्न सम्भव छ (यी तत्वहरू whiteListवा अनुमति दिइएको विशेषताहरू र ट्यागहरूमा थपेर), सचेत रहनुहोस् कि हाल पपओभरले किबोर्ड फोकस क्रम व्यवस्थापन गर्दैन। जब किबोर्ड प्रयोगकर्ताले पपओभर खोल्छ, फोकस ट्रिगर गर्ने तत्वमा रहन्छ, र पपओभरले सामान्यतया कागजातको संरचनामा ट्रिगरलाई तुरुन्तै पछ्याउँदैन, अगाडि बढ्दै/थिच्ने कुनै ग्यारेन्टी छैन।TABकिबोर्ड प्रयोगकर्तालाई पपओभरमा नै सार्नेछ। छोटकरीमा, केवल एक पपओभरमा अन्तरक्रियात्मक नियन्त्रणहरू थप्दा यी नियन्त्रणहरू किबोर्ड प्रयोगकर्ताहरू र सहायक प्रविधिहरूका प्रयोगकर्ताहरूका लागि पहुँचयोग्य/उपयोग गर्न नसकिने हुन सक्छ, वा कमसेकम एक अतार्किक समग्र फोकस अर्डरको लागि बनाउँदछ। यी अवस्थाहरूमा, यसको सट्टामा मोडल संवाद प्रयोग गर्ने विचार गर्नुहोस्।

विकल्पहरू

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

नोट गर्नुहोस् कि सुरक्षा कारणहरूको लागि sanitize, sanitizeFnर whiteListविकल्पहरू डेटा विशेषताहरू प्रयोग गरेर आपूर्ति गर्न सकिँदैन।

नाम	टाइप गर्नुहोस्	पूर्वनिर्धारित	विवरण
एनिमेसन	बुलियन	सत्य	पपओभरमा CSS फेड ट्रान्जिसन लागू गर्नुहोस्
कन्टेनर	तार \| तत्व \| गलत	गलत	पपओभरलाई विशेष तत्वमा जोड्छ। उदाहरण `container: 'body'`:। यो विकल्प विशेष गरी उपयोगी छ कि यसले तपाईंलाई ट्रिगर गर्ने तत्वको नजिक कागजातको प्रवाहमा पपओभर राख्न अनुमति दिन्छ - जसले पपओभरलाई सञ्झ्याल रिसाइज गर्दा ट्रिगर गर्ने तत्वबाट टाढा जानबाट रोक्छ।
सामग्री	तार \| तत्व \| समारोह	''	`data-content`यदि विशेषता अवस्थित छैन भने पूर्वनिर्धारित सामग्री मान । यदि एक प्रकार्य दिइएको छ भने, यसलाई `this`पपओभर संलग्न भएको तत्वमा सेट गरिएको सन्दर्भको साथ कल गरिनेछ।
ढिला	नम्बर \| वस्तु	०	पपओभर (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ वस्तु संरचना हो:`delay: { "show": 500, "hide": 100 }`
html	बुलियन	गलत	पपओभरमा HTML घुसाउनुहोस्। यदि गलत छ भने, `text`DOM मा सामग्री घुसाउन jQuery को विधि प्रयोग गरिनेछ। यदि तपाईं XSS आक्रमणहरूको बारेमा चिन्तित हुनुहुन्छ भने पाठ प्रयोग गर्नुहोस्।
नियुक्ति	तार \| समारोह	'सही'	पपओभर कसरी राख्ने - स्वत: \| शीर्ष \| तल \| बायाँ \| सही। जब `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 अफसेट कागजातहरू हेर्नुहोस् ।
फलब्याक प्लेसमेन्ट	तार \| array	'फ्लिप'	पप्परले फलब्याकमा कुन स्थिति प्रयोग गर्ने छ भनी निर्दिष्ट गर्न अनुमति दिनुहोस्। थप जानकारीको लागि Popper को व्यवहार कागजातहरू सन्दर्भ गर्नुहोस्
customClass	तार \| समारोह	''	पपओभरमा कक्षाहरू थप्नुहोस् जब यो देखाइन्छ। नोट गर्नुहोस् कि यी कक्षाहरू टेम्प्लेटमा निर्दिष्ट गरिएका कुनै पनि कक्षाहरू बाहेक थपिनेछन्। धेरै कक्षाहरू थप्न, तिनीहरूलाई खाली ठाउँहरूद्वारा छुट्याउनुहोस् `'a b'`:। तपाइँ एक प्रकार्य पास गर्न सक्नुहुन्छ जुन अतिरिक्त वर्ग नामहरू समावेश भएको एकल स्ट्रिङ फर्काउनु पर्छ।
सीमा	तार \| तत्व	'स्क्रोल अभिभावक'	पपओभरको ओभरफ्लो अवरोध सीमा। `'viewport'`, `'window'`, `'scrollParent'`, वा HTMLElement सन्दर्भ (जाभास्क्रिप्ट मात्र) को मानहरू स्वीकार गर्दछ । थप जानकारीको लागि Popper's preventOverflow कागजातहरू हेर्नुहोस् ।
सेनिटाइज गर्नुहोस्	बुलियन	सत्य	सेनिटाइजेसन सक्षम वा असक्षम पार्नुहोस्। यदि सक्रिय भयो `'template'`, `'content'`र `'title'`विकल्पहरू सफा गरिनेछ। हाम्रो JavaScript कागजातमा सेनिटाइजर खण्ड हेर्नुहोस् ।
सेतोसूची	वस्तु	पूर्वनिर्धारित मान	अनुमति दिइएको विशेषताहरू र ट्यागहरू समावेश गर्ने वस्तु
sanitizeFn	शून्य \| समारोह	खाली	यहाँ तपाईं आफ्नो सेनिटाइज प्रकार्य आपूर्ति गर्न सक्नुहुन्छ। यदि तपाइँ एक समर्पित पुस्तकालय प्रयोग गर्न रुचाउनुहुन्छ भने यो उपयोगी हुन सक्छ सरसफाई प्रदर्शन गर्न।
popperConfig	शून्य \| वस्तु	खाली	Bootstrap को पूर्वनिर्धारित Popper कन्फिगरेसन परिवर्तन गर्न, Popper को कन्फिगरेसन हेर्नुहोस्

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

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

विधिहरू

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

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

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

`$().popover(options)`

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

`.popover('show')`

तत्वको पपओभर देखाउँछ। पपओभर वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (अर्थात shown.bs.popoverघटना हुनु अघि)। यसलाई पपओभरको "म्यानुअल" ट्रिगरिङ मानिन्छ। Popovers जसको शीर्षक र सामग्री दुवै शून्य-लम्बाइ छन् कहिल्यै प्रदर्शित हुँदैन।

$('#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.popover`DOM मा पपओभर टेम्प्लेट थपिएको घटना पछि यो घटना निकालिन्छ।

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