Source

पोपोवर्स इति

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

अवलोकनम्

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

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

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

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

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

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

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

यदा भवतां समीपे मूलतत्त्वे काश्चन शैल्याः सन्ति ये popover इत्यनेन सह बाधां जनयन्ति तदा भवान् कस्टम् निर्दिष्टुम् इच्छति containerयेन popover इत्यस्य 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टॉगल-तत्त्वात् भिन्नस्य तत्त्वस्य उपयोक्तुः अग्रिम-क्लिक्-करणे पोपोवर्स-निराकरणाय ट्रिगरस्य उपयोगं कुर्वन्तु ।

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

सम्यक् क्रॉस्-ब्राउजर तथा क्रॉस्-प्लेटफॉर्म व्यवहाराय भवद्भिः टैग् इत्यस्य उपयोगः अवश्यं करणीयः <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अन्तरक्रियाशीलाः न सन्ति, अर्थात् उपयोक्तारः पोपोवर (अथवा टूल्टिप्) प्रेरयितुं तान् माउण्ड् कर्तुं वा क्लिक् कर्तुं वा न शक्नुवन्ति । एकं कार्यपरिहाररूपेण, भवान् एकस्मात् wrapper तः popover ट्रिगर कर्तुम् इच्छति <div>अथवा तथा च on the disabled element इति <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)

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""।

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
एनिमेशन बूलियन इति सत्यम्‌ popover मध्ये CSS fade संक्रमणं प्रयोजयन्तु
पात्रम् तार | तत्व | असत्य असत्य

विशिष्टतत्त्वे पोपोवरं योजयति । उदाहरणम् : container: 'body'. एषः विकल्पः विशेषतया उपयोगी अस्ति यत् एतत् भवन्तं ट्रिगरिंग-तत्त्वस्य समीपे दस्तावेजस्य प्रवाहे पोपोवरं स्थापयितुं शक्नोति - यत् विण्डो-आकार-परिवर्तनस्य समये पोपोवरं ट्रिगरिंग-तत्त्वात् दूरं प्लवितुं न निवारयिष्यति
विषयः तार | तत्व | नियोग '' इति ।

data-contentयदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं सामग्रीमूल्यम् ।

यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य thisreference सेट् कृत्वा तस्मिन् तत्त्वे आहूयते यस्मिन् पोपोवरः संलग्नः अस्ति ।
विलम्बः संख्या | वस्तु ०

popover (ms) दर्शयितुं गोपनं च विलम्बः - मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते

यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः अपि विलम्बः प्रयुक्तः भवति

वस्तुसंरचना अस्ति : १.delay: { "show": 500, "hide": 100 }
html बूलियन इति असत्य popover मध्ये HTML सम्मिलितं कुर्वन्तु । यदि मिथ्या अस्ति तर्हि DOM मध्ये सामग्रीं सम्मिलितुं jQuery इत्यस्य textविधिः उपयुज्यते । यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
स्थापनम् तार | नियोग 'दक्षिणः'

पोपोवर को कैसे रखें - ऑटो | शीर्ष | तले | वाम | दक्षिणः।
यदा autoनिर्दिष्टं भवति तदा गतिशीलरूपेण पोपोवरं पुनः उन्मुखं करिष्यति ।

यदा कश्चन फंक्शन् प्लेसमेण्ट् निर्धारयितुं उपयुज्यते तदा तत् popover DOM नोड् इत्यनेन सह प्रथमं आर्गुमेण्ट् रूपेण, ट्रिगरिंग एलिमेण्ट् DOM नोड् इत्यनेन च द्वितीयं कृत्वा आह्वयते । सन्दर्भः thispopover दृष्टान्तं प्रति सेट् भवति ।
चयनकर्ता तार | असत्य असत्य यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्यं प्रति popover वस्तुनि प्रत्यायिताः भविष्यन्ति । व्यवहारे, एतस्य उपयोगः गतिशील HTML सामग्रीं popovers योजयितुं सक्षमीकरणाय भवति । एतत् एकं च सूचनाप्रदं उदाहरणं पश्यन्तु .
टेम्पलेट सूत्र '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

popover इत्यस्य निर्माणकाले उपयोक्तुं HTML आधारं कुर्वन्तु ।

पोपोवरस्य titleअन्तः प्रविष्टं भविष्यति .popover-header.

पोपोवरस्य contentअन्तः प्रविष्टं भविष्यति .popover-body.

.arrowपोपोवरस्य बाणः भविष्यति।

बाह्यतमस्य आवरणतत्त्वस्य .popoverवर्गः भवेत् ।
शीर्षक तार | तत्व | नियोग '' इति ।

titleयदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं शीर्षकमूल्यम् ।

यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य thisreference सेट् कृत्वा तस्मिन् तत्त्वे आहूयते यस्मिन् पोपोवरः संलग्नः अस्ति ।
प्रवर्त्यम् सूत्र 'क्लिक्' इति । popover कथं प्रवर्तते - क्लिक् कुर्वन्तु | भ्रमति | फोकस | शास्त्र। भवान् बहुविधं ट्रिगरं उत्तीर्णं कर्तुं शक्नोति; तान् अन्तरिक्षेण पृथक् कुर्वन्तु। manualअन्येन कस्यचित् उत्प्रेरकेन सह संयोजितुं न शक्यते।
offset इति संख्या | सूत्र ० अपने लक्ष्य के सापेक्ष पोपोवर का ऑफसेट। अधिकविवरणार्थं Popper.js इत्यस्य offset docs पश्यन्तु ।
fallbackस्थापनम् तार | सरणी 'पर्यस्' Fallback इत्यत्र Popper इत्यस्य उपयोगः कस्य स्थानस्य उपयोगं करिष्यति इति निर्दिष्टुं अनुमन्यताम् । अधिकविवरणार्थं Popper.js इत्यस्य व्यवहारदस्तावेजं पश्यन्तु
सीमा तार | तत्व 'scrollParent' इति । पोपोवर की अतिप्रवाह बाध्यता सीमा। 'viewport', 'window', 'scrollParent', अथवा HTMLElement सन्दर्भस्य मूल्यानि स्वीकुर्वति (केवलं JavaScript) । अधिकसूचनार्थं Popper.js इत्यस्य preventOverflow docs पश्यन्तु ।

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

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

विधियाँ

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

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

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

$().popover(options)

एकस्य तत्वसङ्ग्रहस्य कृते popovers आरभते ।

.popover('show')

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

$('#element').popover('show')

.popover('hide')

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

$('#element').popover('hide')

.popover('toggle')

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

$('#element').popover('toggle')

.popover('dispose')

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

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

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

$('#element').popover('update')

घटनाः

घटना प्रकार वर्णनम्‌
show.bs.popover इति दर्शयतु एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते ।
दर्शितम्.bs.popover इदं घटना तदा प्रज्वलितं भवति यदा popover उपयोक्त्रे दृश्यमानं कृतम् अस्ति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
hide.bs.popover इति इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः hideआहूता अस्ति ।
गुप्त.ब्स्.दरिद्रम् इदं घटना तदा प्रज्वलितं भवति यदा popover उपयोक्त्रेण गोपनीयं समाप्तं भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
सम्मिलितम्।ब्स्.दरिद्रम् इदं इवेण्ट् इवेण्ट् इत्यस्य अनन्तरं show.bs.popoverयदा popover टेम्पलेट् DOM मध्ये योजितं भवति तदा निष्कासितम् अस्ति । 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})