مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

پاپورز

Bootstrap popovers کي شامل ڪرڻ لاءِ دستاويز ۽ مثال، جهڙوڪ جيڪي iOS ۾ مليا آهن، توهان جي سائيٽ تي ڪنهن به عنصر تي.

اوسر

Popover پلگ ان کي استعمال ڪرڻ وقت ڄاڻڻ لاء شيون:

  • Popovers پوزيشن لاء 3rd پارٽي لائبريري Popper تي ڀروسو . توهان کي bootstrap.js کان اڳ popper.min.js شامل ڪرڻ گهرجي يا استعمال ڪرڻ bootstrap.bundle.min.js/ bootstrap.bundle.jsجنهن ۾ Popper شامل آهي popovers ڪم ڪرڻ لاءِ!
  • Popovers هڪ انحصار جي طور تي ٽول ٽائپ پلگ ان جي ضرورت آهي.
  • Popovers ڪارڪردگي سببن لاء آپٽ-ان آهن، تنهنڪري توهان کي انهن کي پنهنجو پاڻ شروع ڪرڻ گهرجي .
  • زيرو ڊگھائي title۽ contentقدر ڪڏهن به پاپ اوور نه ڏيکاريندا.
  • container: 'body'وڌيڪ پيچيده اجزاء (جهڙوڪ اسان جي ان پٽ گروپن، بٽڻ گروپن، وغيره) ۾ رينجرنگ مسئلن کان بچڻ لاء وضاحت ڪريو .
  • لڪيل عناصر تي پاپ اوور کي ڇڪڻ ڪم نه ڪندو.
  • .disabledيا عنصرن لاءِ پوپ اوور disabledلازمي طور تي چاڙهيو وڃي ٿو چادر واري عنصر تي.
  • جڏهن اينڪرز مان شروع ڪيو ويو آهي جيڪي ڪيترن ئي لائينن ۾ لپي ويندا آهن، پاپ اوور لنگر جي مجموعي چوٽي جي وچ ۾ مرڪز هوندا. هن رويي کان بچڻ لاء .text-nowrapتوهان جي ايس تي استعمال ڪريو .<a>
  • Popovers کي لڪايو وڃي ان کان اڳ جو انهن جي لاڳاپيل عناصر کي DOM مان هٽايو ويو آهي.
  • پاڇو DOM اندر هڪ عنصر جي مهرباني سان پاپ اوور شروع ٿي سگهي ٿو.
ڊفالٽ طور، هي جزو استعمال ڪري ٿو تعمير ٿيل مواد صاف ڪرڻ وارو، جيڪو ڪنهن به HTML عناصر کي ختم ڪري ٿو جيڪو واضح طور تي اجازت نه آهي. ڏسو صاف ڪرڻ وارو سيڪشن اسان جي جاوا اسڪرپٽ دستاويزن ۾ وڌيڪ تفصيل لاءِ.
ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

پڙهو ته ڏسو ته ڪيئن 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اختيار استعمال ڪندي

جڏهن توهان وٽ والدين عنصر تي ڪجهه انداز آهن جيڪي پاپ اوور سان مداخلت ڪن ٿا، توهان چاهيو ٿا ته هڪ ڪسٽم بيان ڪريو containerته جيئن پاپ اوور جو 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>ٽيگ، نه<button> ٽيگ، ۽ توھان کي لازمي طور تي ھڪڙو وصف شامل ڪرڻ گھرجي tabindex.

<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نه هوندا آهن، مطلب ته صارف هور نه ٿا ڪري سگهن يا انهن تي ڪلڪ ڪري هڪ پاپ اوور (يا ٽول ٽائپ) کي ٽاري سگهن ٿا. ڪم ڪار جي طور تي، توھان چاھيو ٿا پوپ اوور کي چاڙھڻ چاھيو ٿا ريپر مان <div>يا <span>، مثالي طور تي ڪيبورڊ تي ڌيان ڏيڻ جي قابل استعمال ڪندي 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);

استعمال

جاوا اسڪرپٽ ذريعي پاپ اوور کي فعال ڪريو:

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

ڪي بورڊ ۽ مددگار ٽيڪنالاجي استعمال ڪندڙن لاءِ پاپ اوور ڪم ڪرڻ

ڪيبورڊ استعمال ڪندڙن کي اجازت ڏيڻ لاءِ توھان جي پاپ اوور کي چالو ڪرڻ لاءِ، توھان کي انھن کي صرف HTML عناصر ۾ شامل ڪرڻ گھرجي جيڪي روايتي طور ڪيبورڊ-فوڪسيبل ۽ متعامل آھن (جهڙوڪ لنڪس يا فارم ڪنٽرول). جيتوڻيڪ پاڻمرادو HTML عناصر (جهڙوڪ <span>s) tabindex="0"وصف شامل ڪرڻ سان ڌيان ڏيڻ جي قابل ٿي سگھن ٿا، اهو ڪيبورڊ استعمال ڪندڙن لاءِ غير انٽرايڪٽو عناصر تي امڪاني طور تي پريشان ڪندڙ ۽ پريشان ڪندڙ ٽيب اسٽاپ شامل ڪندو، ۽ گهڻيون مددگار ٽيڪنالاجيون في الحال پاپ اوور جي مواد جو اعلان نه ڪنديون آهن هن صورتحال ۾ . اضافي طور تي، مڪمل طور تي انحصار نه ڪريو hoverجيئن توهان جي پاپ اوور لاء ٽرگر، ڇاڪاڻ ته اهو انهن کي ڪيبورڊ استعمال ڪندڙن لاء ٽرڪ ڪرڻ ناممڪن بڻائيندو.

جڏهن ته توهان اختيار سان گڏ پوپ اوور ۾ امير، منظم ٿيل HTML داخل ڪري سگهو ٿا html، اسان سختي سان صلاح ڏيو ٿا ته توهان مواد جي گهڻي مقدار کي شامل ڪرڻ کان پاسو ڪريو. هن وقت پاپ اوور جو طريقو اهو آهي ته، هڪ ڀيرو ڏيکاريل آهي، انهن جو مواد ٽرگر عنصر سان aria-describedbyوصف سان ڳنڍيل آهي. نتيجي طور، پوپ اوور جي مواد جي مڪمل طور تي اعلان ڪيو ويندو مددگار ٽيڪنالاجي استعمال ڪندڙن کي هڪ ڊگهو، اڻ رڪاوٽ وهڪرو.

اضافي طور تي، جڏهن ته توهان جي پاپ اوور ۾ انٽرايڪٽو ڪنٽرولز (جهڙوڪ فارم عناصر يا لنڪس) شامل ڪرڻ ممڪن آهي (انهن عنصرن کي allowListاجازت ڏنل خاصيتن ۽ ٽيگ ۾ شامل ڪرڻ سان)، هوشيار رهو ته في الحال پاپ اوور ڪيبورڊ فوڪس آرڊر کي منظم نٿو ڪري. جڏهن ڪيبورڊ استعمال ڪندڙ هڪ پاپ اوور کوليندو آهي، فوڪس محرڪ عنصر تي رهي ٿو، ۽ جيئن ته پاپ اوور عام طور تي دستاويز جي جوڙجڪ ۾ ٽرگر جي فوري طور تي پيروي نه ڪندو آهي، اتي ڪا به ضمانت نه آهي ته اڳتي وڌڻ/دٻائڻ جي.TABڪيبورڊ استعمال ڪندڙ کي پاپ اوور ۾ منتقل ڪندو. مختصر ۾، صرف هڪ پاپ اوور ۾ انٽرايڪٽو ڪنٽرول شامل ڪرڻ ممڪن آهي ته اهي ڪنٽرول ڪيبورڊ استعمال ڪندڙن ۽ مددگار ٽيڪنالاجي جي استعمال ڪندڙن لاءِ ناقابل رسائي/ناقابل استعمال هجن، يا گهٽ ۾ گهٽ هڪ غير منطقي مجموعي فوڪس آرڊر لاءِ ٺاهيو وڃي. انهن حالتن ۾، ان جي بدران ماڊل ڊائلاگ استعمال ڪرڻ تي غور ڪريو.

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-bs-، جيئن data-bs-animation="". ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت ڪيبل ڪيس کان ڪيبل ڪيس ۾ اختيار جي نالي جي ڪيس جي قسم کي تبديل ڪرڻ جي پڪ ڪريو. مثال طور، استعمال ڪرڻ بدران data-bs-customClass="beautifier"، استعمال ڪريو data-bs-custom-class="beautifier".

نوٽ ڪريو ته حفاظتي سببن جي ڪري sanitize، sanitizeFn, ۽ allowListاختيارن کي مهيا نه ٿو ڪري سگھجي ڊيٽا خاصيتون استعمال ڪندي.
نالو قسم ڊفالٽ وصف
animation بولين true پاپ اوور تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
container تار | عنصر | ڪوڙو false

پوپ اوور کي خاص عنصر ۾ شامل ڪري ٿو. مثال: container: 'body'. هي اختيار خاص طور تي ڪارائتو آهي ته اهو توهان کي اجازت ڏئي ٿو ته پاپ اوور کي دستاويز جي وهڪري ۾ ٽريگرنگ عنصر جي ويجهو - جيڪو پاپ اوور کي ونڊو ريزائز ڪرڻ دوران ٽريگرنگ عنصر کان پري ٿيڻ کان روڪيندو.

content تار | عنصر | فنڪشن ''

ڊفالٽ مواد جي قيمت جيڪڏهن data-bs-contentخاصيت موجود نه آهي.

جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي thisحوالي سان ان عنصر جي سيٽ سان جيڪو پاپ اوور سان ڳنڍيل آهي.

delay نمبر | اعتراض 0

پوپ اوور (ms) ڏيکارڻ ۽ لڪائڻ ۾ دير - دستي ٽرگر جي قسم تي لاڳو نٿو ٿئي

جيڪڏهن هڪ نمبر فراهم ڪيو ويو آهي، دير سان لاڳو ٿئي ٿي ٻنهي کي لڪائڻ / ڏيکاريو

اعتراض جي جوڙجڪ آهي:delay: { "show": 500, "hide": 100 }

html بولين false پاپ اوور ۾ HTML داخل ڪريو. جيڪڏهن غلط آهي، innerTextملڪيت استعمال ڪئي ويندي مواد داخل ڪرڻ لاءِ DOM ۾. متن استعمال ڪريو جيڪڏھن توھان پريشان آھيو XSS حملن بابت.
placement تار | فنڪشن 'right'

پاپ اوور کي ڪيئن پوزيشن ڏيڻ - آٽو | مٿي | هيٺان | کاٻي | ساڄو.
جڏهن autoبيان ڪيو ويو آهي، اهو متحرڪ طور تي پاپ اوور کي ٻيهر ترتيب ڏيندو.

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي جڳهه جو تعين ڪرڻ لاء، ان کي سڏيو ويندو آهي پاپ اوور DOM نوڊ سان ان جي پهرين دليل طور ۽ محرڪ عنصر DOM نوڊ ان جي سيڪنڊ طور. thisحوالو پاپ اوور مثال تي مقرر ڪيو ويو آهي .

selector تار | ڪوڙو false جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، پاپ اوور شين کي مقرر ڪيل هدفن ڏانهن نمائندو ڪيو ويندو. عملي طور تي، اهو استعمال ڪيو ويندو آهي متحرڪ HTML مواد کي فعال ڪرڻ لاءِ پاپ اوور شامل ڪرڻ لاءِ. هي ڏسو ۽ هڪ معلوماتي مثال .
template تار '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

پاپ اوور ٺاهڻ وقت استعمال ڪرڻ لاءِ بنيادي HTML.

پاپ اوور کي انجيڪشن title۾ داخل ڪيو ويندو .popover-header.

پاپ اوور کي انجيڪشن content۾ داخل ڪيو ويندو .popover-body.

.popover-arrowپاپ اوور جو تير بڻجي ويندو.

ٻاهرين لفافي عنصر کي .popoverطبقو هجڻ گهرجي.

title تار | عنصر | فنڪشن ''

ڊفالٽ عنوان جي قيمت جيڪڏهن titleخاصيت موجود نه آهي.

جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي thisحوالي سان ان عنصر جي سيٽ سان جيڪو پاپ اوور سان ڳنڍيل آهي.

trigger تار 'click' پاپ اوور ڪيئن شروع ٿئي ٿو - ڪلڪ ڪريو | هور | ڌيان | دستور. توھان ڪيترائي محرڪ پاس ڪري سگھو ٿا؛ انھن کي ھڪڙي جڳھ سان الڳ ڪريو. manualڪنهن ٻئي ٽرگر سان گڏ نه ٿو ڪري سگھجي.
fallbackPlacements صف ['top', 'right', 'bottom', 'left'] فال بڪ جي جڳھن جي وضاحت ڪريو صف ۾ جڳھن جي لسٽ مهيا ڪندي (ترجيح جي ترتيب ۾). وڌيڪ معلومات لاءِ ڏسو پوپر جي رويي جي دستاويزن
boundary تار | عنصر 'clippingParents' پاپ اوور جي اوور فلو رڪاوٽ جي حد (صرف پوپر جي روڪ اوور فلو موڊيفائر تي لاڳو ٿئي ٿو). ڊفالٽ طور اهو آهي 'clippingParents'۽ هڪ HTMLElement ريفرنس قبول ڪري سگهي ٿو (صرف JavaScript ذريعي). وڌيڪ معلومات لاءِ ڏسو Popper's detectOverflow docs .
customClass تار | فنڪشن ''

پوپ اوور ۾ ڪلاس شامل ڪريو جڏھن اھو ڏيکاريل آھي. نوٽ ڪريو ته اھي ڪلاس شامل ڪيا ويندا ڪنھن به ڪلاس کان علاوه ٽيمپليٽ ۾ بيان ڪيل. گھڻن طبقن کي شامل ڪرڻ لاء، انھن کي خالن سان الڳ ڪريو: 'class-1 class-2'.

توھان ھڪڙو فنڪشن پڻ پاس ڪري سگھو ٿا جيڪو ھڪڙي اسٽرنگ کي واپس ڪرڻ گھرجي جنھن ۾ اضافي ڪلاس جا نالا شامل آھن.

sanitize بولين true صفائي کي فعال يا غير فعال ڪريو. جيڪڏهن چالو ڪيو ويندو 'template'، 'content'۽ 'title'اختيارن کي صاف ڪيو ويندو. اسان جي جاوا اسڪرپٽ دستاويزن ۾ صاف ڪرڻ وارو سيڪشن ڏسو .
allowList اعتراض ڊفالٽ قدر اعتراض جنهن ۾ اجازت ڏنل خاصيتون ۽ ٽيگ شامل آهن
sanitizeFn null | فنڪشن null هتي توهان پنهنجي صفائي واري فنڪشن کي فراهم ڪري سگهو ٿا. اهو ڪارائتو ٿي سگهي ٿو جيڪڏهن توهان صفائي ڪرڻ لاءِ وقف ٿيل لائبريري استعمال ڪرڻ چاهيندا آهيو.
offset صف | تار | فنڪشن [0, 8]

ان جي حدف جي نسبت سان پاپ اوور جو آفسٽ. توهان ڪاما جدا ڪيل قدرن سان ڊيٽا جي خاصيتن ۾ هڪ اسٽرنگ پاس ڪري سگهو ٿا جهڙوڪ:data-bs-offset="10,20"

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي آفسيٽ کي طئي ڪرڻ لاء، ان کي سڏيو ويندو آهي هڪ اعتراض سان جنهن ۾ پاپپر جي جڳهه، حوالو، ۽ پاپپر ان جي پهرين دليل جي طور تي رد ڪري ٿو. ٽاريندڙ عنصر DOM نوڊ ٻئي دليل طور منظور ڪيو ويو آهي. فنڪشن کي ٻن نمبرن سان هڪ صف واپس ڪرڻ گهرجي: .[skidding, distance]

وڌيڪ معلومات لاءِ ڏسو Popper's offset docs .

popperConfig null | اعتراض | فنڪشن null

Bootstrap جي ڊفالٽ Popper config کي تبديل ڪرڻ لاء، Popper جي ترتيب کي ڏسو .

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي Popper ترتيب ٺاهڻ لاء، اهو هڪ اعتراض سان سڏيو ويندو آهي جنهن ۾ Bootstrap جي ڊفالٽ Popper ترتيب شامل آهي. اهو توهان کي استعمال ڪرڻ ۽ ڊفالٽ کي توهان جي پنهنجي ترتيب سان ملائڻ ۾ مدد ڪري ٿو. فنڪشن کي پوپر لاءِ هڪ ترتيب واري شئي واپس ڪرڻ گهرجي.

انفرادي پاپورز لاءِ ڊيٽا جون خاصيتون

انفرادي popovers لاء اختيارن کي متبادل طور تي بيان ڪري سگهجي ٿو ڊيٽا جي خاصيتن جي استعمال ذريعي، جيئن مٿي بيان ڪيو ويو آهي.

فنڪشن سان استعمال ڪنديpopperConfig

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

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن واپس ويندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا JavaScript دستاويز ڏسو .

ڏيکارڻ

هڪ عنصر جي پاپ اوور کي ظاهر ڪري ٿو. پوپ اوور اصل ۾ ڏيکاريو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . shown.bs.popoverاهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽ. Popovers جن جو عنوان ۽ مواد ٻئي صفر ڊگھائي آهن ڪڏهن به ڏيکاريل نه آهن.

myPopover.show()

لڪائڻ

هڪ عنصر جي پاپ اوور کي لڪائيندو آهي. پوپ اوور اصل ۾ لڪايو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . hidden.bs.popoverاهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽ.

myPopover.hide()

ٽوگل ڪرڻ

هڪ عنصر جي پاپ اوور کي ٽوگل ڪري ٿو. پوپ اوور اصل ۾ ڏيکاريو ويو يا لڪايو ويو (يعني واقعي يا واقعو ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . اهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽ.shown.bs.popoverhidden.bs.popover

myPopover.toggle()

نيڪال ڪرڻ

هڪ عنصر جي پاپ اوور کي لڪايو ۽ تباهه ڪري ٿو (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو). پاپورز جيڪي وفد استعمال ڪندا آهن (جيڪي اختيار استعمال ڪندي ٺاهيا ويا آهن ) selectorانفرادي طور تي نسلي ٽرگر عناصر تي تباهه نه ٿي سگهن.

myPopover.dispose()

چالو ڪرڻ

هڪ عنصر جي پاپ اوور کي ڏيکاريو وڃڻ جي صلاحيت ڏئي ٿي. Popovers ڊفالٽ طور تي فعال آهن.

myPopover.enable()

غير فعال ڪرڻ

هڪ عنصر جي پاپ اوور کي ڏيکارڻ جي صلاحيت کي هٽائي ٿو. پاپ اوور صرف ان صورت ۾ ڏيکاريو ويندو جڏهن ان کي ٻيهر فعال ڪيو ويندو.

myPopover.disable()

toggle فعال

هڪ عنصر جي پاپ اوور کي ڏيکارڻ يا لڪائڻ جي صلاحيت کي ٽوگل ڪري ٿو.

myPopover.toggleEnabled()

تازه ڪاري

هڪ عنصر جي پاپ اوور جي پوزيشن کي اپڊيٽ ڪري ٿو.

myPopover.update()

getInstance

جامد طريقو جيڪو توهان کي حاصل ڪرڻ جي اجازت ڏئي ٿو پاپ اوور مثال DOM عنصر سان لاڳاپيل

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

getOrCreateInstance

جامد طريقو جيڪو توهان کي حاصل ڪرڻ جي اجازت ڏئي ٿو پاپ اوور مثال هڪ DOM عنصر سان لاڳاپيل، يا هڪ نئون ٺاهيو جيڪڏهن اهو شروع نه ڪيو ويو هجي

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

واقعا

واقعي جو قسم وصف
show.bs.popover اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي.
ڏيکاريو ويو.bs.popover اهو واقعو فائر ڪيو ويو آهي جڏهن پاپ اوور کي صارف لاءِ ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
hide.bs.popover اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي.
hidden.bs.popover هي واقعو فائر ڪيو ويندو آهي جڏهن پاپ اوور ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
inserted.bs.popover اهو واقعو ان واقعي کان پوءِ فائر ڪيو ويو آهي show.bs.popoverجڏهن پاپ اوور ٽيمپليٽ ڊوم ۾ شامل ڪيو ويو آهي.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})