मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

पोपोवर्स इति

iOS मध्ये दृश्यमानानि इव Bootstrap popovers इत्येतत् भवतः साइट् मध्ये कस्मिन् अपि तत्त्वे योजयितुं दस्तावेजीकरणं उदाहरणानि च ।

इस पृष्ठ पर

अवलोकनम्

popover प्लगिन् इत्यस्य उपयोगं कुर्वन् ज्ञातव्यानि वस्तूनि:

  • पोपोवर्सः स्थितिनिर्धारणार्थं तृतीयपक्षपुस्तकालयस्य पोपरस्य उपरि अवलम्बन्ते । भवद्भिः पूर्वं popper.min.js इत्येतत् अवश्यमेव समाविष्टं कर्तव्यम् bootstrap.js, अथवा एकं उपयोक्तव्यं bootstrap.bundle.min.jsयस्मिन् Popper अस्ति ।
  • Popovers इत्यस्य आश्रयरूपेण popover प्लगिन् इत्यस्य आवश्यकता भवति ।
  • Popovers कार्यप्रदर्शनकारणात् opt-in भवन्ति, अतः भवान् स्वयमेव तान् आरभणीयम् .
  • शून्य-दीर्घता मूल्यानि titleच contentकदापि पोपोवरं न दर्शयिष्यन्ति।
  • container: 'body'अधिकजटिलघटकेषु (यथा अस्माकं निवेशसमूहाः, बटनसमूहाः इत्यादयः) रेण्डरिंगसमस्याः परिहरितुं निर्दिशन्तु ।
  • गुप्ततत्त्वेषु पोपोवर्स-प्रवर्तनं कार्यं न करिष्यति ।
  • Popovers for .disabledor disabledelements इत्यस्य कृते wrapper element इत्यस्य उपरि अवश्यमेव ट्रिगर करणीयम् ।
  • यदा बहुरेखाः वेष्टयन्ति लंगरात् प्रेरिताः भवन्ति तदा पोपोवर्स लंगरस्य समग्रविस्तारस्य मध्ये केन्द्रीकृताः भविष्यन्ति । एतत् व्यवहारं परिहरितुं .text-nowrapभवतः s इत्यस्य उपयोगं कुर्वन्तु।<a>
  • DOM तः तेषां तत्सम्बद्धानां तत्त्वानां निष्कासनात् पूर्वं पोपोवर्सः अवश्यमेव गोपनीयाः ।
  • छाया DOM इत्यस्य अन्तः एकस्य तत्त्वस्य धन्यवादेन Popovers ट्रिगर कर्तुं शक्यते ।
पूर्वनिर्धारितरूपेण, अयं घटकः अन्तःनिर्मितसामग्री-सैनिटाइजर् इत्यस्य उपयोगं करोति, यत् स्पष्टतया अनुमतं न भवति इति किमपि HTML-तत्त्वं विच्छिन्दति । अधिकविवरणार्थं अस्माकं JavaScript documentation मध्ये sanitizer इति विभागं पश्यन्तु ।
अस्य घटकस्य एनिमेशन-प्रभावः prefers-reduced-motionमीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

केनचित् उदाहरणैः सह popovers कथं कार्यं कुर्वन्ति इति द्रष्टुं पठन्तः भवन्तु।

उदाहरणानि

popovers सक्षम करें

यथा पूर्वं उक्तं, भवद्भिः पोपोवर्स् इत्यस्य उपयोगात् पूर्वं तेषां आरम्भः करणीयः । पृष्ठे सर्वान् popovers आरम्भयितुं एकः उपायः स्यात् तेषां data-bs-toggleविशेषताद्वारा चयनं करणीयम्, यथा तथा:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

लाइव डेमो

वयं निम्नलिखित लाइव popover रेण्डर् कर्तुं उपरिष्टात् स्निपेट् इव जावास्क्रिप्ट् इत्यस्य उपयोगं कुर्मः । शीर्षकाणि मार्गेण सेट् भवन्ति data-bs-titleतथा च शरीरसामग्री माध्यमेन सेट् भवति data-bs-content.

titleएकं वा data-bs-titleस्वस्य HTML मध्ये वा उपयोक्तुं निःशङ्कं भवन्तु । यदा titleउपयुज्यते तदा Popper स्वयमेव तत् प्रतिस्थापयिष्यति data-bs-titleयदा तत्त्वं प्रतिपादितं भवति ।
html 
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

चत्वारि दिशः

उपरि, दक्षिणं, अधः, वामं च इति चत्वारः विकल्पाः उपलभ्यन्ते । RTL मध्ये Bootstrap इत्यस्य उपयोगं कुर्वन् निर्देशाः प्रतिबिम्बिताः भवन्ति । data-bs-placementदिशा परिवर्तयितुं सेट् कुर्वन्तु।

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

आचारःcontainer

यदा भवतां समीपे मूलतत्त्वे काश्चन शैल्याः सन्ति ये popover इत्यनेन सह बाधां जनयन्ति तदा भवान् कस्टम् निर्दिष्टुम् इच्छति containerयेन popover इत्यस्य HTML तस्य स्थाने तस्य तत्त्वस्य अन्तः दृश्यते । प्रतिक्रियाशीलसारणीषु, निवेशसमूहेषु इत्यादिषु एतत् सामान्यम् अस्ति ।

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

अन्यः स्थितिः यत्र भवान् स्पष्टं कस्टम् सेट् कर्तुम् इच्छति तत्र containerpopovers inside a modal dialog , सुनिश्चितं कर्तुं यत् popover स्वयं modal मध्ये संलग्नम् अस्ति । इदं विशेषतया पोपोवर-कृते महत्त्वपूर्णं भवति येषु अन्तरक्रियाशील-तत्त्वानि सन्ति – मोडल-संवादाः ध्यानं फसयिष्यन्ति, अतः यावत् पोपोवरः मोडलस्य बाल-तत्त्वं न भवति, तावत् उपयोक्तारः एतान् अन्तरक्रियाशील-तत्त्वान् केन्द्रीक्रियितुं वा सक्रियं कर्तुं वा न शक्नुवन्ति

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

कस्टम पोपोवर्स

v5.2.0 इत्यस्मिन् योजितम्

CSS चरानाम् उपयोगेन भवान् popovers इत्यस्य स्वरूपं अनुकूलितुं शक्नोति | वयं अस्माकं कस्टम् रूपं व्याप्त्यर्थं कस्टम् क्लास् सेट् कुर्मः data-bs-custom-class="custom-popover"तथा च केषाञ्चन स्थानीय CSS चरानाम् अधिलिखितुं तस्य उपयोगं कुर्मः ।

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}
html 
<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

अग्रिमे क्लिक् कृत्वा निष्कासयन्तु

focusटॉगल-तत्त्वात् भिन्नस्य तत्त्वस्य उपयोक्तुः अग्रिम-क्लिक्-करणे पोपोवर्स-निराकरणाय ट्रिगरस्य उपयोगं कुर्वन्तु ।

dismiss-on-next-click कृते विशिष्टं मार्कअप आवश्यकम्

सम्यक् क्रॉस्-ब्राउजर तथा क्रॉस्-प्लेटफॉर्म व्यवहाराय भवद्भिः टैग् इत्यस्य उपयोगः अवश्यं करणीयः <a>, न तु <button>टैग्, अपि च भवद्भिः tabindexविशेषता अपि समाविष्टा भवितुमर्हति ।

खारिज करने योग्य पोपोवर
html 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

अक्षम तत्व

विशेषतायुक्ताः तत्त्वानि disabledअन्तरक्रियाशीलाः न सन्ति, अर्थात् उपयोक्तारः पोपोवर (अथवा टूलटिप्) प्रेरयितुं तान् माउसर् कर्तुं वा क्लिक् कर्तुं वा न शक्नुवन्ति । एकं कार्यपरिहाररूपेण, भवान् एकस्मात् wrapper तः popover ट्रिगर कर्तुम् इच्छति <div>अथवा <span>, आदर्शरूपेण कृतं keyboard-focusable इत्यस्य उपयोगेन tabindex="0"।

अक्षम-पोपोवर-उद्दीपकानाम् कृते, भवान् अपि इष्टं कर्तुं शक्नोति data-bs-trigger="hover focus"यत् पोपोवरः भवतः उपयोक्तृभ्यः तत्कालं दृश्य-प्रतिक्रियारूपेण दृश्यते यतः ते अक्षम-तत्त्वे क्लिक् कर्तुं न अपेक्षन्ते

html 
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

CSS इति

चर

v5.2.0 इत्यस्मिन् योजितम्

Bootstrap इत्यस्य विकसितस्य CSS चरस्य दृष्टिकोणस्य भागत्वेन, popovers इदानीं .popoverवर्धितस्य वास्तविकसमयस्य अनुकूलनस्य कृते स्थानीय CSS चरस्य उपयोगं कुर्वन्ति । CSS चरस्य मूल्यानि Sass मार्गेण सेट् भवन्ति, अतः Sass अनुकूलनं अद्यापि समर्थितम् अस्ति, अपि ।

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);

सस्स चर

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

प्रयोगः

जावास्क्रिप्ट् मार्गेण popovers सक्षमं कुर्वन्तु:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

कीबोर्डस्य सहायकप्रौद्योगिकीप्रयोक्तृणां कृते च पोपोवर्स् कार्यं कर्तुं करणम्

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

यद्यपि भवान् विकल्पेन सह popovers मध्ये समृद्धं, संरचितं HTML सम्मिलितुं शक्नोति तथापि htmlवयं दृढतया अनुशंसयामः यत् भवान् अत्यधिकमात्रायां सामग्रीं योजयितुं परिहरतु। सम्प्रति popovers इत्यस्य कार्यं यथा भवति तत् अस्ति यत्, एकवारं प्रदर्शितं जातं चेत्, तेषां सामग्री aria-describedbyविशेषतायुक्तेन trigger element इत्यनेन सह बद्धा भवति । फलतः, ​​popover इत्यस्य सामग्रीयाः सम्पूर्णता सहायकप्रौद्योगिकीप्रयोक्तृभ्यः एकः दीर्घः, अबाधितः धारारूपेण घोषितः भविष्यति।

अतिरिक्तरूपेण, यद्यपि भवतः popover मध्ये अन्तरक्रियाशीलनियन्त्रणानि (यथा रूपतत्त्वानि अथवा लिङ्कानि) अपि समावेशयितुं शक्यते (एतानि तत्त्वानि अनुमतविशेषतानां allowListटैगानां च मध्ये योजयित्वा), तदा अवगच्छन्तु यत् वर्तमानकाले popover कीबोर्ड फोकस क्रमं न प्रबन्धयति यदा कीबोर्ड-उपयोक्ता एकं पोपोवरं उद्घाटयति तदा ट्रिगर-तत्त्वे एव ध्यानं तिष्ठति, तथा च यतः पोपोवरः सामान्यतया दस्तावेजस्य संरचनायां ट्रिगरस्य तत्क्षणं अनुसरणं न करोति, अतः अग्रे गमनस्य/निपीडनस्य गारण्टी नास्तिTABएकं कीबोर्ड-उपयोक्तारं स्वयं popover मध्ये स्थापयिष्यति । संक्षेपेण, केवलं एकस्मिन् popover मध्ये अन्तरक्रियाशीलनियन्त्रणानि योजयित्वा एतानि नियन्त्रणानि कीबोर्ड-उपयोक्तृणां सहायक-प्रौद्योगिकीनां च उपयोक्तृणां कृते अप्राप्य/अप्रयोज्य-करणस्य सम्भावना वर्तते, अथवा न्यूनतया अतार्किक-समग्र-केन्द्रीकरण-क्रमस्य कृते भवति एतेषु सति, तस्य स्थाने मोडल् संवादस्य उपयोगं विचारयन्तु ।

विकल्पाः

यतः विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते, भवान् विकल्पनाम योजयितुं शक्नोति data-bs-, यथा data-bs-animation="{value}". data attributes मार्गेण विकल्पान् पारयन्ते सति विकल्पनामस्य case type “ camelCase ” तः “ kebab-case ” इति परिवर्तयितुं सुनिश्चितं कुर्वन्तु । यथा - इत्यस्य data-bs-custom-class="beautifier"स्थाने प्रयोगं कुर्वन्तु data-bs-customClass="beautifier"।

Bootstrap 5.2.0 तः, सर्वे घटकाः प्रयोगात्मकं आरक्षितदत्तांशविशेषणं समर्थयन्ति data-bs-configयत् सरलघटकविन्यासं JSON स्ट्रिंग् रूपेण स्थापयितुं शक्नोति । यदा कस्यचित् तत्त्वस्य data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes भवति तदा अन्तिममूल्यं titleभविष्यति 456तथा च पृथक् data attributes इत्यत्र दत्तानि मूल्यानि अधिलिखिष्यन्ति data-bs-config। तदतिरिक्तं, विद्यमानाः दत्तांशविशेषताः JSON मूल्यानि यथा - स्थापनं कर्तुं समर्थाः सन्ति data-bs-delay='{"show":0,"hide":150}'।

ध्यानं कुर्वन्तु यत् सुरक्षाकारणात् sanitize, sanitizeFn, allowListविकल्पाः च दत्तांशविशेषतानां उपयोगेन आपूर्तिं कर्तुं न शक्यन्ते ।
नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
allowList वस्तु पूर्वनिर्धारितं मूल्यम् वस्तु यस्मिन् अनुमतविशेषताः टैग् च सन्ति ।
animation बूलियन इति true popover मध्ये CSS fade संक्रमणं प्रयोजयन्तु ।
boundary तार, तत्व 'clippingParents' popover इत्यस्य Overflow constraint boundary (केवलं Popper इत्यस्य preventOverflow modifier इत्यस्य कृते प्रवर्तते) । पूर्वनिर्धारितरूपेण, एतत् 'clippingParents'HTMLElement सन्दर्भं (केवलं JavaScript मार्गेण) स्वीकुर्वितुं शक्नोति च । अधिकविवरणार्थं Popper इत्यस्य detectOverflow docs पश्यन्तु ।
container तार, तत्व, मिथ्या false विशिष्टतत्त्वे पोपोवरं योजयति । उदाहरणम् : container: 'body'. एषः विकल्पः विशेषतया उपयोगी अस्ति यत् एतत् भवन्तं ट्रिगरिंग-तत्त्वस्य समीपे दस्तावेजस्य प्रवाहे पोपोवरं स्थापयितुं शक्नोति - यत् विण्डो-आकार-परिवर्तनस्य समये पोपोवरं ट्रिगरिंग-तत्त्वात् दूरं प्लवितुं न निवारयिष्यति
content स्ट्रिंग्, एलिमेण्ट्, फंक्शन् '' data-bs-contentयदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं सामग्रीमूल्यम् । यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य thisreference सेट् कृत्वा तस्मिन् एलिमेण्ट् प्रति आह्वयते यस्मिन् पोपोवरः संलग्नः अस्ति ।
customClass स्ट्रिंग्, फंक्शन् '' यदा दर्शितं भवति तदा popover मध्ये classes योजयन्तु। ध्यानं कुर्वन्तु यत् एते वर्गाः टेम्पलेट् मध्ये निर्दिष्टानां केषाञ्चन वर्गानां अतिरिक्तं योजिताः भविष्यन्ति । अनेकवर्गान् योजयितुं तान् रिक्तस्थानैः पृथक् कुर्वन्तु: 'class-1 class-2'. भवान् एकं फंक्शन् अपि पारयितुं शक्नोति यत् अतिरिक्तवर्गनामानि समाविष्टं एकं स्ट्रिंग् रिटर्न् कर्तव्यम् ।
delay संख्या, वस्तु 0 popover (ms) दर्शयितुं गोपनं च विलम्बः—मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते । यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः अपि विलम्बः प्रयुक्तः भवति । वस्तु संरचना अस्ति : delay: { "show": 500, "hide": 100 }.
fallbackPlacements तार, सरणी ['top', 'right', 'bottom', 'left'] सरणीयां (प्राथमिकताक्रमेण) स्थानानां सूचीं प्रदातुं fallback placements परिभाषयन्तु । अधिकविवरणार्थं Popper's behavior docs पश्यन्तु ।
html बूलियन इति false popover मध्ये HTML इत्यस्य अनुमतिं ददातु। यदि सत्यं तर्हि popover's मध्ये HTML टैग्स् popover titleमध्ये प्रतिपादिताः भविष्यन्ति । यदि मिथ्या अस्ति तर्हि innerTextDOM मध्ये सामग्रीं सम्मिलितुं गुणस्य उपयोगः भविष्यति । यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
offset संख्या, तार, कार्य [0, 0] अपने लक्ष्य के सापेक्ष पोपोवर का ऑफसेट। अल्पविरामेन पृथक्कृतैः मूल्यैः सह data attributes इत्यत्र भवन्तः एकं स्ट्रिंग् पारयितुं शक्नुवन्ति यथा: data-bs-offset="10,20". यदा offset निर्धारयितुं फंक्शन् उपयुज्यते तदा तस्य प्रथमं तर्करूपेण popper placement, reference, popper rects च समाविष्टेन वस्तुना सह आह्वयते ट्रिगरिंग् एलिमेण्ट् DOM नोड् द्वितीयं आर्गुमेण्ट् रूपेण पारितं भवति । फंक्शन् द्वयोः सङ्ख्यायोः सह सरणीं प्रत्यागन्तुं अर्हति: skidding , distance . अधिकविवरणार्थं Popper's offset docs पश्यन्तु ।
placement स्ट्रिंग्, फंक्शन् 'top' popover को कैसे रखें: auto, top, bottom, left, right. यदा autoनिर्दिष्टं भवति तदा गतिशीलरूपेण पोपोवरं पुनः उन्मुखं करिष्यति । यदा कश्चन फंक्शन् प्लेसमेण्ट् निर्धारयितुं उपयुज्यते तदा तत् popover DOM नोड् इत्यनेन सह प्रथमं आर्गुमेण्ट् रूपेण, ट्रिगरिंग एलिमेण्ट् DOM नोड् इत्यनेन च द्वितीयं कृत्वा आह्वयते । सन्दर्भः thispopover दृष्टान्तं प्रति सेट् भवति ।
popperConfig शून्य, वस्तु, कार्य null Bootstrap इत्यस्य पूर्वनिर्धारितं Popper विन्यासं परिवर्तयितुं, Popper इत्यस्य विन्यासं पश्यन्तु । यदा Popper विन्यासस्य निर्माणार्थं फंक्शन् उपयुज्यते तदा तत् एकेन वस्तुना सह आह्वयते यस्मिन् Bootstrap इत्यस्य पूर्वनिर्धारितं Popper विन्यासः भवति । इदं भवन्तं पूर्वनिर्धारितं स्वस्य विन्यासेन सह उपयोक्तुं विलीनीकरणं च कर्तुं साहाय्यं करोति । फंक्शन् इत्यनेन Popper कृते विन्यासवस्तुं प्रत्यागन्तुं भवति ।
sanitize बूलियन इति true सेनेटाइजेशनं सक्षमं निष्क्रियं वा कुर्वन्तु। यदि सक्रियम् 'template'अस्ति , 'content'तथा 'title'विकल्पाः सेनिट् कृताः भविष्यन्ति।
sanitizeFn null, कार्यम् null अत्र भवान् स्वस्य सेनिटाइज् फंक्शन् आपूर्तिं कर्तुं शक्नोति। यदि भवान् स्वच्छीकरणं कर्तुं समर्पितं पुस्तकालयं उपयोक्तुं रोचते तर्हि एतत् उपयोगी भवितुम् अर्हति ।
selector तार, मिथ्या false यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्यं प्रति popover वस्तुनि प्रत्यायिताः भविष्यन्ति । व्यवहारे, एतस्य उपयोगः गतिशीलरूपेण योजितानां DOM तत्त्वानां ( jQuery.onsupport) कृते अपि popovers प्रयोक्तुं भवति । एतत् अंकं सूचनाप्रदं उदाहरणं च पश्यन्तु .
template सूत्र '<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>' popover इत्यस्य निर्माणकाले उपयोक्तुं HTML आधारं कुर्वन्तु । पोपोवरस्य titleअन्तः प्रविष्टं भविष्यति .popover-inner. .popover-arrowपोपोवरस्य बाणः भविष्यति। बाह्यतमस्य आवरणतत्त्वस्य .popoverवर्गः भवेत् तथा च role="popover".
title स्ट्रिंग्, एलिमेण्ट्, फंक्शन् '' titleयदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं शीर्षकमूल्यम् । यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य thisreference सेट् कृत्वा तस्मिन् एलिमेण्ट् प्रति आह्वयते यस्मिन् पोपोवरः संलग्नः अस्ति ।
trigger सूत्र 'hover focus' popover कथं प्रवर्तते: क्लिक्, होवर, फोकस, मैनुअल्। भवान् बहुविधं ट्रिगरं उत्तीर्णं कर्तुं शक्नोति; तान् अन्तरिक्षेण पृथक् कुर्वन्तु। 'manual'सूचयति यत् पोपोवरः प्रोग्रामेटिकरूपेण .popover('show'), .popover('hide')तथा .popover('toggle')विधिभिः माध्यमेन प्रेरितः भविष्यति; एतत् मूल्यं अन्येन कस्यचित् ट्रिगरेन सह संयोजितुं न शक्यते । 'hover'स्वयमेव पोपोवर्स् इत्यस्य परिणामः भविष्यति ये कीबोर्डद्वारा प्रेरयितुं न शक्यन्ते, तथा च केवलं तदा एव उपयोक्तव्याः यदा कीबोर्ड-उपयोक्तृणां कृते समानसूचनाः प्रसारयितुं वैकल्पिकाः पद्धतयः सन्ति

व्यक्तिगत पोपोवर्स् कृते आँकडा विशेषताः

व्यक्तिगत पोपोवर्स् कृते विकल्पाः वैकल्पिकरूपेण दत्तांशगुणानां उपयोगेन निर्दिष्टुं शक्यन्ते, यथा उपरि व्याख्यातम् ।

सह function का प्रयोग करते हुएpopperConfig 

const popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

विधियाँ

अतुल्यकालिक विधियाँ एवं संक्रमण

सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .

अधिकविवरणार्थं अस्माकं जावास्क्रिप्ट् दस्तावेजं पश्यन्तु .

प्रक्रिया वर्णनम्‌
disable तत्त्वस्य पोपोवरस्य दर्शयितुं क्षमताम् अपसारयति । पोपोवरः केवलं पुनः सक्षमीकरणे एव दर्शयितुं समर्थः भविष्यति ।
dispose एकस्य तत्त्वस्य popover गोपयति नष्टं च करोति (DOM तत्वे संगृहीतदत्तांशं निष्कासयति) । प्रतिनिधिमण्डलस्य उपयोगं कुर्वन्तः पोपोवर्स् (ये विकल्पस्य उपयोगेन निर्मिताः सन्ति ) selectorवंशज -उद्दीपक-तत्त्वेषु व्यक्तिगतरूपेण नष्टं कर्तुं न शक्यते ।
enable एकस्य तत्त्वस्य popover दर्शयितुं क्षमता ददाति। Popovers पूर्वनिर्धारितरूपेण सक्षमम् अस्ति ।
getInstance स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं popover उदाहरणं प्राप्तुं शक्नोति ।
getOrCreateInstance स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं popover उदाहरणं प्राप्तुं शक्नोति, अथवा नूतनं निर्मातुं शक्नोति यद्यपि एतत् आरम्भं न कृतम् आसीत् ।
hide एकस्य तत्त्वस्य पोपोवरं गोपयति। पोपोवरस्य वास्तविकरूपेण गोपनीयत्वात् पूर्वं (अर्थात् hidden.bs.popoverघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते ।
setContent तस्य आरम्भस्य अनन्तरं popover इत्यस्य सामग्रीं परिवर्तयितुं मार्गं ददाति ।
show एकस्य तत्त्वस्य पोपोवरं प्रकाशयति। popover यथार्थतः दर्शितस्य पूर्वं (अर्थात् shown.bs.popoverघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते । येषां शीर्षकं सामग्री च शून्य-दीर्घतायाः द्वौ अपि भवतः पोपोवर्सः कदापि न प्रदर्शिताः भवन्ति ।
toggle एकस्य तत्त्वस्य popover इत्येतत् टॉगल करोति । popover इत्यस्य वास्तविकरूपेण दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.popoveror hidden.bs.popoverevent इत्यस्य भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते ।
toggleEnabled एकस्य तत्त्वस्य popover दर्शयितुं गोपनीयं वा क्षमता टॉग्ल करोति ।
update एकस्य तत्त्वस्य popover इत्यस्य स्थितिं अद्यतनं करोति । 
// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})
विधिः setContentएकं objectतर्कं स्वीकुर्वति, यत्र प्रत्येकं गुण-कुंजी stringpopover टेम्पलेट् अन्तः वैधचयनकर्ता भवति, तथा च प्रत्येकं सम्बन्धितं गुण-मूल्यं string| element| function| null

घटनाः

घटना वर्णनम्‌
hide.bs.popover इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः hideआहूता अस्ति ।
hidden.bs.popover इदं घटना तदा प्रज्वलितं भवति यदा popover उपयोक्त्रेण गोपनीयं समाप्तं भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
inserted.bs.popover इदं इवेण्ट् इवेण्ट् इत्यस्य अनन्तरं show.bs.popoverयदा popover टेम्पलेट् DOM मध्ये योजितं भवति तदा निष्कासितम् अस्ति ।
show.bs.popover एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते ।
shown.bs.popover इदं घटना तदा प्रज्वलितं भवति यदा popover उपयोक्त्रे दृश्यमानं कृतम् अस्ति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) । 
const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})