पोपोवर्स इति

अवलोकनम्

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

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

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

उदाहरणम् : सर्वत्र popovers सक्षमं कुर्वन्तु

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

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

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

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

उदाहरण

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

चत्वारि दिशः

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

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

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

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

अक्षम तत्व

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

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

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

सस्स

चर

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

प्रयोगः

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

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-bs-योजयन्तु data-bs-animation=""। डेटा विशेषताद्वारा विकल्पान् पारयन्ते सति विकल्पनामस्य case प्रकारं camelCase तः kebab-case मध्ये परिवर्तयितुं सुनिश्चितं कुर्वन्तु । यथा - इत्यस्य उपयोगस्य स्थाने data-bs-customClass="beautifier", इत्यस्य उपयोगं कुर्वन्तु data-bs-custom-class="beautifier"।

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

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

विधियाँ

दर्शयतु

एकस्य तत्त्वस्य पोपोवरं प्रकाशयति। popover यथार्थतः दर्शितस्य पूर्वं (अर्थात् shown.bs.popoverघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते । येषां शीर्षकं सामग्री च शून्य-दीर्घतायाः द्वौ अपि भवतः पोपोवर्सः कदापि न प्रदर्शिताः भवन्ति ।

myPopover.show()

गोपयतु

एकस्य तत्त्वस्य पोपोवरं गोपयति। पोपोवरस्य वास्तविकरूपेण गोपनीयत्वात् पूर्वं (अर्थात् hidden.bs.popoverघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते ।

myPopover.hide()

toggle इति

एकस्य तत्त्वस्य popover इत्येतत् टॉगल करोति । popover इत्यस्य वास्तविकरूपेण दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.popoveror hidden.bs.popoverevent इत्यस्य भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । एतत् पोपोवरस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते ।

myPopover.toggle()

विसर्जयेत्

एकस्य तत्त्वस्य popover गोपयति नष्टं च करोति (DOM तत्वे संगृहीतदत्तांशं निष्कासयति) । प्रतिनिधिमण्डलस्य उपयोगं कुर्वन्तः पोपोवर्स् (ये विकल्पस्य उपयोगेन निर्मिताः सन्ति ) selectorवंशज -उद्दीपक-तत्त्वेषु व्यक्तिगतरूपेण नष्टं कर्तुं न शक्यते ।

myPopover.dispose()

सक्रियं करोतु

एकस्य तत्त्वस्य popover दर्शयितुं क्षमता ददाति। Popovers पूर्वनिर्धारितरूपेण सक्षमम् अस्ति ।

myPopover.enable()

अक्षम

तत्त्वस्य पोपोवरस्य दर्शयितुं क्षमताम् अपसारयति । पोपोवरः केवलं पुनः सक्षमीकरणे एव दर्शयितुं समर्थः भविष्यति ।

myPopover.disable()

toggleEnabled इति

एकस्य तत्त्वस्य popover दर्शयितुं गोपनीयं वा क्षमता टॉग्ल करोति ।

myPopover.toggleEnabled()

अद्यतन

एकस्य तत्त्वस्य popover इत्यस्य स्थितिं अद्यतनं करोति ।

myPopover.update()

getInstance इति

स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं popover उदाहरणं प्राप्तुं शक्नोति

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateइन्स्टेंस इति

स्थिरविधिः या भवन्तं DOM-तत्त्वेन सह सम्बद्धं popover-दृष्टान्तं प्राप्तुं शक्नोति, अथवा नूतनं निर्मातुं शक्नोति यद्यपि एतत् आरम्भं न कृतम् आसीत्

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

घटनाः

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})