पोपोवर्स इति

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`यदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं सामग्रीमूल्यम् । यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य `this`reference सेट् कृत्वा तस्मिन् तत्त्वे आहूयते यस्मिन् पोपोवरः संलग्नः अस्ति ।
विलम्बः	संख्या \| वस्तु	०	popover (ms) दर्शयितुं गोपनं च विलम्बः - मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः अपि विलम्बः प्रयुक्तः भवति वस्तुसंरचना अस्ति : १.`delay: { "show": 500, "hide": 100 }`
html	बूलियन इति	असत्य	popover मध्ये HTML सम्मिलितं कुर्वन्तु । यदि मिथ्या अस्ति तर्हि DOM मध्ये सामग्रीं सम्मिलितुं jQuery इत्यस्य `text`विधिः उपयुज्यते । यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
स्थापनम्	तार \| नियोग	'दक्षिणः'	पोपोवर को कैसे रखें - ऑटो \| शीर्ष \| तले \| वाम \| दक्षिणः। यदा `auto`निर्दिष्टं भवति तदा गतिशीलरूपेण पोपोवरं पुनः उन्मुखं करिष्यति । यदा कश्चन फंक्शन् प्लेसमेण्ट् निर्धारयितुं उपयुज्यते तदा तत् popover DOM नोड् इत्यनेन सह प्रथमं आर्गुमेण्ट् रूपेण, ट्रिगरिंग एलिमेण्ट् DOM नोड् इत्यनेन च द्वितीयं कृत्वा आह्वयते । सन्दर्भः `this`popover दृष्टान्तं प्रति सेट् भवति ।
चयनकर्ता	तार \| असत्य	असत्य	यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्यं प्रति 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`यदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं शीर्षकमूल्यम् । यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य `this`reference सेट् कृत्वा तस्मिन् तत्त्वे आहूयते यस्मिन् पोपोवरः संलग्नः अस्ति ।
प्रवर्त्यम्	सूत्र	'क्लिक्' इति ।	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…
})