باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

پۆپۆڤەرز

بەڵگەنامە و نموونە بۆ زیادکردنی Bootstrap popovers، وەک ئەوانەی لە iOS دەبینرێن، بۆ هەر توخمێک لە ماڵپەڕەکەتدا.

تێڕوانینێکی گشتی

ئەو شتانەی کە پێویستە بزانیت لە کاتی بەکارهێنانی پێوەکراوەکەی popover:

  • پۆپۆڤەرەکان پشت بە کتێبخانەی لایەنی سێیەم دەبەستن پۆپەر بۆ جێگیرکردن. پێویستە پێش bootstrap.js popper.min.js دابنێیت یان bootstrap.bundle.min.js/ بەکاربهێنیت bootstrap.bundle.jsکە Popper لەخۆدەگرێت بۆ ئەوەی popovers کاربکات!
  • Popovers پێویستیان بە پێوەکراوەکەی tooltip وەک وابەستەیەک هەیە.
  • Popovers بە هۆکاری کاراییەوە بەشداریکردنە، بۆیە دەبێت خۆت سەرەتایییان بکەیت .
  • سفر-درێژی titleو contentبەهاکان هەرگیز پۆپۆڤەرێک نیشان نادەن.
  • دیاری بکە container: 'body'بۆ ئەوەی کێشەی ڕەندەرکردن لە پێکهاتە ئاڵۆزترەکاندا ڕوونەدات (وەک گروپەکانی چوونەژوورەوەمان، گروپەکانی دوگمەکان و هتد).
  • دەستپێکردنی پۆپۆڤەرەکان لەسەر توخمە شاراوەکان کار ناکات.
  • پۆپۆڤەرەکان بۆ .disabledیان disabledتوخمەکان دەبێت لەسەر توخمێکی پێچراو دەستپێبکرێن.
  • کاتێک لە لەنگەرەکانەوە دەستپێدەکرێت کە بەسەر چەندین هێڵدا دەپێچنەوە، پۆپۆڤەرەکان لە نێوان پانایی گشتی لەنگەرەکاندا لە ناوەڕاستدا دەبن. .text-nowrapلەسەر s ـەکەت بەکاربهێنە <a>بۆ ئەوەی لەم ڕەفتارە دوور بکەویتەوە.
  • دەبێت پۆپۆڤەرەکان بشاردرێنەوە پێش ئەوەی توخمە هاوبەشەکانیان لە DOM لاببرێن.
  • دەتوانرێت Popovers بەهۆی توخمێک لە ناو 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>

چوار ئاراستە

چوار بژاردە بەردەستە: سەرەوە، ڕاست، خوارەوە و چەپ ڕێکخراو. ڕێنماییەکان لە کاتی بەکارهێنانی Bootstrap لە RTLدا ئاوێنە دەکرێن.

<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بۆ ڕەتکردنەوەی پۆپۆڤەرەکان لەسەر کلیکی داهاتووی بەکارهێنەر لەسەر توخمێکی جیاواز لە توخمەکەی toggle.

پێویستە نیشانەیەکی تایبەت بۆ ڕەتکردنەوە لەسەر کلیککردنی داهاتوو

بۆ هەڵسوکەوتی دروستی cross-browser و cross-platform، پێویستە تاگەکە بەکاربهێنیت <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);

بەکارهێنان

چالاککردنی popovers لە ڕێگەی جاڤاسکڕێپتەوە:

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

کردنی پۆپۆڤەرەکان بۆ بەکارهێنەرانی کیبۆرد و تەکنەلۆژیای یارمەتیدەر کاربکەن

بۆ ئەوەی ڕێگە بە بەکارهێنەرانی کیبۆرد بدەیت کە پۆپۆڤەرەکانت چالاک بکەن، تەنها پێویستە زیادیان بکەیت بۆ ئەو توخمانەی HTML کە بە شێوەیەکی نەریتی فۆکەس لەسەر کیبۆرد و کارلێککەرن (وەک بەستەر یان کۆنتڕۆڵی فۆڕم). هەرچەندە دەتوانرێت توخمە HTML ی ئارەزوومەندانە (وەک <span>s) بە زیادکردنی تایبەتمەندییەکە بکرێتە فۆکەس tabindex="0"، بەڵام ئەمە وەستانی تابەکانی ئەگەری بێزارکەر و سەرلێشێواو لەسەر توخمە ناکارلێککەرەکان بۆ بەکارهێنەرانی کیبۆرد زیاد دەکات، و زۆربەی تەکنەلۆژیا یارمەتیدەرەکان لە ئێستادا ناوەڕۆکی popover لەم دۆخەدا ڕاناگەیەنن . سەرەڕای ئەوەش، تەنها پشت بەو شتانە مەبەستە hoverوەک دەستپێکەر بۆ پۆپۆڤەرەکانت، چونکە ئەمە وا دەکات کە مەحاڵ بێت دەستپێکردنیان بۆ بەکارهێنەرانی کیبۆرد.

لە کاتێکدا دەتوانیت HTML دەوڵەمەند و پێکهاتەدار لە popovers بە htmlبژاردەکە دابنێیت، ئێمە بە توندی پێشنیار دەکەین کە خۆت بەدوور بگرێت لە زیادکردنی بڕێکی زۆر لە ناوەڕۆک. شێوازی کارکردنی پۆپۆڤەرەکان لە ئێستادا ئەوەیە کە، کاتێک پیشان دەدرێن، ناوەڕۆکەکەیان بەستراوەتەوە بە توخمە دەستپێکەرەکە بە aria-describedbyتایبەتمەندییەکە. لە ئەنجامدا، تەواوی ناوەڕۆکی popover وەک یەک ڕژێمی درێژ و بێ پچڕان بە بەکارهێنەرانی تەکنەلۆژیای یارمەتیدەر ڕادەگەیەنرێت.

سەرەڕای ئەوە، لە کاتێکدا دەتوانرێت کۆنتڕۆڵە کارلێککارەکان (وەک توخمەکانی فۆرم یان بەستەرەکان) لە پۆپۆڤەرەکەتدا جێگیر بکرێت (بە زیادکردنی ئەم توخمانە بۆ allowListتایبەتمەندی و تاگە ڕێگەپێدراوەکان)، ئاگاداربە کە لە ئێستادا پۆپۆڤەر ڕێکخستنی فۆکۆسی کیبۆرد بەڕێوە نابات. کاتێک بەکارهێنەرێکی کیبۆرد پۆپۆڤەرێک دەکاتەوە، فۆکەس لەسەر توخمە دەستپێکەرەکە دەمێنێتەوە، و بەو پێیەی پۆپۆڤەرەکە بەزۆری دەستبەجێ بەدوای تریگەرەکەدا ناچێت لە پێکهاتەی بەڵگەنامەکەدا، هیچ گەرەنتییەک نییە کە بەرەو پێشەوە/پەستان بچێتTABبەکارهێنەرێکی کیبۆرد دەگوازێتەوە بۆ ناو خودی پۆپۆڤەرەکە. بە کورتی، بە سادەیی زیادکردنی کۆنتڕۆڵە کارلێکەکان بۆ پۆپۆڤەرێک ئەگەری زۆرە ئەم کۆنتڕۆڵانە بۆ بەکارهێنەرانی کیبۆرد و بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان نەگات/بەکارنەهێنرێت، یان لانیکەم ببێتە هۆی ئەوەی کە فەرمانێکی فۆکۆسی گشتی نالۆژیکی بێت. لەم حاڵەتانەدا، بیر لە بەکارهێنانی دیالۆگێکی مۆداڵی بکەرەوە لەبری ئەوە.

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-bs-, وەک لە data-bs-animation="". دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە camelCase بۆ kebab-case لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە لەبری بەکارهێنانی data-bs-customClass="beautifier", بەکاربهێنە data-bs-custom-class="beautifier".

تێبینی بکە کە لەبەر هۆکاری ئاسایش ناتوانرێت هەڵبژاردەکانی sanitize, sanitizeFn, و بە بەکارهێنانی تایبەتمەندییەکانی داتا دابین بکرێت.allowList
ناو جۆر بنەڕەتی وەسف
animation boolean true گواستنەوەی کاڵبوونەوەی CSS بۆ popover بەکاربهێنە
container ڕستە | توخم | هەڵە false

پۆپۆڤەرەکە بە توخمێکی دیاریکراوەوە دەبەستێتەوە. نموونە: container: 'body'. ئەم هەڵبژاردنە بە تایبەتی بەسوودە لەبەر ئەوەی ڕێگەت پێدەدات پۆپۆڤەرەکە لە ڕەوتی بەڵگەنامەکەدا لە نزیک توخمە دەستپێکەرەکە دابنێیت - کە ڕێگری دەکات لە هەڵفڕینی پۆپۆڤەرەکە لە توخمە دەستپێکەرەکە دوور لە کاتی گۆڕینی قەبارەی پەنجەرە.

content ڕستە | توخم | کردار ''

بەهای ناوەڕۆکی پێشوەختە ئەگەر data-bs-contentتایبەتمەندییەکە ئامادە نەبێت.

ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە thisڕێکخستنی ئاماژەکەی بۆ ئەو توخمە کە پۆپۆڤەرەکە پێیەوە لکێنراوە.

delay ژمارە | شت 0

دواکەوتنی پیشاندانی و شاردنەوەی پۆپۆڤەر (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە

ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نمایشکردن جێبەجێ دەکرێت

پێکهاتەی شت بریتییە لە:delay: { "show": 500, "hide": 100 }

html boolean false HTML بخەرە ناو popoverەکەوە. ئەگەر هەڵە innerTextبێت، تایبەتمەندی بەکاردەهێنرێت بۆ دانانی ناوەڕۆک لە DOM. ئەگەر نیگەرانیت لە هێرشەکانی XSS دەق بەکاربهێنە.
placement ڕستە | کردار 'right'

چۆنێتی جێگیرکردنی popover - auto | سەرەوە | خوارەوە | چەپ | ڕاست.
کاتێک autoدیاری دەکرێت، بە شێوەیەکی داینامیکی پەپۆڤەرەکە ئاڕاستە دەکاتەوە.

کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی شوێنەکە، بانگ دەکرێت بە گرێی popover DOM وەک یەکەم ئارگومێنت و توخمە دەستپێکەرەکە گرێی DOM وەک دووەم. کۆنتێکستەکە thisبۆ نموونەی popover دانراوە.

selector ڕستە | هەڵە false ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی پۆپۆڤەر دەدرێنە ئامانجە دیاریکراوەکان. لە پراکتیکدا ئەمە بەکاردێت بۆ چالاککردنی ناوەڕۆکی HTML ی داینامیکی بۆ ئەوەی popovers زیاد بکرێت. ئەمە و نموونەیەکی زانیاری ببینە .
template ڕستە '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

بنەمای HTML بۆ بەکارهێنان لە کاتی دروستکردنی popover.

پۆپۆڤەرەکان titleدەدرێنە ناو .popover-header.

پۆپۆڤەرەکان contentدەدرێنە ناو .popover-body.

.popover-arrowدەبێتە تیری پۆپۆڤەر.

دەرەوەترین توخمە پێچراوەکە دەبێت .popoverپۆلەکەی هەبێت.

title ڕستە | توخم | کردار ''

بەهای ناونیشانی پێشوەختە ئەگەر titleتایبەتمەندی ئامادە نەبێت.

ئەگەر فەنکشنێک بدرێت، ئەوا بانگ دەکرێت بە thisڕێکخستنی ئاماژەکەی بۆ ئەو توخمە کە پۆپۆڤەرەکە پێیەوە لکێنراوە.

trigger ڕستە 'click' چۆن popover دەستپێدەکات - کلیک لە | بکە hover | فۆکەس | بەدەستی. لەوانەیە چەندین تریگەر تێپەڕێنیت؛ بە بۆشایییەک جیایان بکەرەوە. manualناتوانرێت لەگەڵ هیچ تریگەرێکی تردا تێکەڵ بکرێت.
fallbackPlacements ڕیزبەندی ['top', 'right', 'bottom', 'left'] پێناسەی شوێنەکانی fallback بکە بە دابینکردنی لیستی شوێنەکان لە ڕیزبەندی (بە رێکوپێکی پەسەندکردن). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی هەڵسوکەوتی پۆپەر بکە
boundary ڕستە | پێکهاتە 'clippingParents' سنووری سنووردارکردنی Overflow ی popover (تەنها بۆ دەستکاریکەری preventOverflow ی Popper دەگونجێت). بە شێوازی پێشوەختە 'clippingParents'ئاماژەی HTMLElement یە و دەتوانێت قبوڵ بکات (تەنها لە ڕێگەی جاڤاسکڕێپتەوە). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی detectOverflow ی Popper بکە .
customClass ڕستە | کردار ''

کاتێک پیشان دەدرێت پۆلەکان زیاد بکە بۆ پۆپۆڤەر. تێبینی بکە کە ئەم پۆلانە زیاد دەکرێن جگە لە هەر پۆلێک کە لە قاڵبەکەدا دیاری کراوە. بۆ زیادکردنی چەندین پۆل، بە بۆشایی جیایان بکەرەوە: 'class-1 class-2'.

هەروەها دەتوانیت فەنکشنێک تێپەڕێنیت کە دەبێت یەک ڕستە بگەڕێنێتەوە کە ناوی پۆلی زیادەی تێدایە.

sanitize boolean true پاککردنەوەکە چالاک یان ناچالاک بکە. ئەگەر چالاک کرا 'template', 'content'و 'title'بژاردەکان پاک دەکرێنەوە. سەیری بەشی پاککەرەوە بکە لە بەڵگەنامەکانی جاڤاسکڕێپتەکەماندا .
allowList شت بةهاى دواكةوتن شتێک کە تایبەتمەندی و تاگی ڕێگەپێدراو لەخۆدەگرێت
sanitizeFn پووچ | کردار null لێرەدا دەتوانیت کارایی پاککردنەوەی خۆت دابین بکەیت. ئەمە دەتوانێت بەسوود بێت ئەگەر پێت باشە کتێبخانەی تایبەت بەکاربهێنیت بۆ ئەنجامدانی پاکوخاوێنی.
offset ڕیزبەندی | ڕستە | کردار [0, 8]

ئۆفسێتی پۆپۆڤەر بە بەراورد بە ئامانجەکەی. دەتوانیت ڕستەیەک لە تایبەتمەندییەکانی داتادا بە بەها جیاکراوەکانی کۆما وەک:data-bs-offset="10,20"

کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی ئۆفسێتەکە، بە ئۆبجێکتیک بانگ دەکرێت کە شوێنی پۆپەر و ئاماژە و پۆپەر rects وەک یەکەم ئارگومێنتی تێدایە. گرێی DOM ی توخمە دەستپێکەر وەک ئارگومێنتی دووەم دەگوازرێتەوە. فەنکشنەکە دەبێت ڕیزبەندییەک بگەڕێنێتەوە بە دوو ژمارەی: .[skidding, distance]

بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی ئۆفسێتی پۆپەر بکە .

popperConfig پووچ | شت | کردار null

بۆ گۆڕینی ڕێکخستنی پێشوەختەی Popper ی Bootstrap، سەیری ڕێکخستنی Popper بکە .

کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دروستکردنی ڕێکخستنی Popper، بە شتێک بانگ دەکرێت کە ڕێکخستنی پێشوەختەی Popper ی Bootstrap لەخۆدەگرێت. یارمەتیت دەدات کە پێشوەختە لەگەڵ ڕێکخستنی خۆت بەکاربهێنیت و تێکەڵیان بکەیت. فەنکشنەکە دەبێت شتێکی ڕێکخستن بۆ Popper بگەڕێنێتەوە.

تایبەتمەندیەکانی داتا بۆ تاکە پۆپۆڤەرەکان

دەتوانرێت بژاردەکان بۆ تاکە پۆپۆڤەرەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت، وەک لە سەرەوە ڕوون کراوەتەوە.

بەکارهێنانی فەنکشن لەگەڵpopperConfig

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

شێوازەکان

شێواز و گواستنەوە ناهاوسەنگەکان

هەموو شێوازەکانی API ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی شێواز لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .

بۆ زانیاری زیاتر سەیری بەڵگەنامەکانی جاڤاسکڕێپت بکە .

نیشاندان

پۆپۆڤەری توخمێک ئاشکرا دەکات. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە پیشان بدرێت (واتە پێش ئەوەی shown.bs.popoverڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە دەستپێکردنی "دەستی" پۆپۆڤەر دادەنرێت. ئەو پۆپۆڤەرانەی کە ناونیشان و ناوەڕۆکیان هەردووکیان درێژی سفرە هەرگیز پیشان نادرێن.

myPopover.show()

شاردنەوە

پۆپۆڤەری توخمێک دەشارێتەوە. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.popoverڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە دەستپێکردنی "دەستی" پۆپۆڤەر دادەنرێت.

myPopover.hide()

toggle بکە

پۆپۆڤەری توخمێک دەگۆڕێت. دەگەڕێتەوە بۆ پەیوەندیکەر پێش ئەوەی لە ڕاستیدا popover پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.popoverیان hidden.bs.popoverڕووبدات). ئەمەش بە دەستپێکردنی "دەستی" پۆپۆڤەر دادەنرێت.

myPopover.toggle()

فڕێ بدە

پاپۆڤەری توخمێک دەشارێتەوە و لەناویان دەبات (زانیاری هەڵگیراو لەسەر توخمەکەی DOM لا دەبات). ئەو پۆپۆڤەرانەی کە نوێنەرایەتی بەکاردەهێنن (کە بە بەکارهێنانی بژاردەی دروست دەکرێن ) selectorناتوانرێت بە تاک لەسەر توخمەکانی دەستپێکەری نەوە لەناوببرێن.

myPopover.dispose()

چالاک کردن

توانای پیشاندانی بە پۆپۆڤەری توخمێک دەدات. Popovers بە شێوازی پێشوەختە چالاک کراوە.

myPopover.enable()

ناچالاک کردن

توانای پیشاندانی پۆپۆڤەری توخمێک لا دەبات. popover تەنها لە حاڵەتێکدا دەتوانرێت پیشان بدرێت کە دووبارە چالاک بکرێتەوە.

myPopover.disable()

toggleEnabled کراوە

توانای پیشاندانی یان شاردنەوەی پۆپۆڤەری توخمێک دەگۆڕێت.

myPopover.toggleEnabled()

نوێکردنەوە

شوێنی پۆپۆڤەری توخمێک نوێ دەکاتەوە.

myPopover.update()

getInstance

شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی popover بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە

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

getOrCreateInstance

شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی popover بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، یان یەکێکی نوێ دروست بکەیت لە ئەگەری دەستپێنەکردندا

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

ڕووداوەکان

جۆری ڕووداو وەسف
show.bs.popover ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
نیشان دراوە.bs.popover ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە پۆپۆڤەرەکە بۆ بەکارهێنەر دیار بێت (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات).
شاردنەوە.bs.popover ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideشێوازی نموونە بانگ کراوە.
شاراوە.bs.popover ئەم ڕووداوە کاتێک تەقە دەکرێت کە popover تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕوان دەکات تا گواستنەوەکانی CSS تەواو دەبن).
جێگیرکراوە.bs.popover ئەم ڕووداوە دوای show.bs.popoverڕووداوەکە کاتێک قاڵبی popover زیاد کراوە بۆ DOM کاردەکاتە دەرەوە.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})