פּאָפּאָווערס

איבערבליק

טינגז צו וויסן ווען איר נוצן די פּאָפּאָווער פּלוגין:

• פּאָפּאָווערס פאַרלאָזנ זיך די 3rd פּאַרטיי ביבליאָטעק פּאָפּער פֿאַר פּאַזישאַנינג. איר מוזן אַרייַננעמען popper.min.js איידער bootstrap.js אָדער נוצן bootstrap.bundle.min.js/ bootstrap.bundle.jsוואָס כּולל פּאָפּער אין סדר פֿאַר פּאָפּאָווערס צו אַרבעטן!
• פּאָפּאָווערס דאַרפן די טאָאָלטיפּ פּלוגין ווי אַ דעפּענדענסי.
• פּאָפּאָווערס זענען אַפּט-אין פֿאַר פאָרשטעלונג סיבות, אַזוי איר מוזן ינישאַלייז זיי זיך .
• נול-לענג titleאון contentוואַלועס וועט קיינמאָל ווייַזן אַ פּאָפּאָווער.
• ספּעציפיצירן container: 'body'צו ויסמיידן רענדערינג פּראָבלעמס אין מער קאָמפּליצירט קאַמפּאָונאַנץ (ווי אונדזער אַרייַנשרייַב גרופּעס, קנעפּל גרופּעס, עטק).
• טריגערינג פּאָפּאָווערס אויף פאַרבאָרגן עלעמענטן וועט נישט אַרבעטן.
• פּאָפּאָווערס פֿאַר .disabledאָדער disabledעלעמענטן מוזן זיין טריגערד אויף אַ ראַפּער עלעמענט.
• ווען טריגערד פון אַנגקערז וואָס ייַנוויקלען אַריבער קייפל שורות, פּאָפּאָווערס וועט זיין סענטערד צווישן די אַנגקערז ' קוילעלדיק ברייט. ניצן .text-nowrapאויף דיין <a>s צו ויסמיידן דעם נאַטור.
• פּאָפּאָווערס מוזן זיין פאַרבאָרגן איידער זייער קאָראַספּאַנדינג עלעמענטן זענען אַוועקגענומען פון די DOM.
• פּאָפּאָווערס קענען זיין טריגערד דאַנק צו אַן עלעמענט אין אַ שאָטן DOM.

האַלטן לייענען צו זען ווי פּאָפּאָווערס אַרבעט מיט עטלעכע ביישפילן.

בייַשפּיל: געבן פּאָפּאָווערס אומעטום

איין וועג צו ינישאַלייז אַלע פּאָפּאָווערס אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער 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צינגל צו אָפּזאָגן פּאָפּאָווערס אויף דער באַניצער 'ס ווייַטער גיט פון אַ אַנדערש עלעמענט ווי די טאַגאַל עלעמענט.

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

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-bs-, ווי אין data-bs-animation="". מאַכן זיכער צו טוישן די פאַל טיפּ פון די אָפּציע נאָמען פון camelCase צו קעבאַב-פאַל ווען איר פאָרן די אָפּציעס דורך דאַטן אַטריביוץ. פֿאַר בייַשפּיל, אַנשטאָט פון ניצן data-bs-customClass="beautifier", נוצן data-bs-custom-class="beautifier".

ניצן פונקציע מיטpopperConfig

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

מעטהאָדס

ווייַזן

ריווילז אַן עלעמענט ס פּאָפּאָווער. קערט צו די קאַללער איידער די פּאָפּאָווער איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.popoverגעשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די פּאָפּאָווער. פּאָפּאָווערס וועמענס טיטל און אינהאַלט זענען ביידע נול-לענג זענען קיינמאָל געוויזן.

myPopover.show()

באַהאַלטן

כיידז אַן עלעמענט ס פּאָפּאָווער. קערט צו די קאַללער איידער די פּאָפּאָווער איז פאקטיש געווען פאַרבאָרגן (ד"ה איידער די hidden.bs.popoverגעשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די פּאָפּאָווער.

myPopover.hide()

טאַגאַל

טאָגלעס אַן עלעמענט ס פּאָפּאָווער. קערט צו די קאַללער איידער די פּאָפּאָווער איז אַקטשאַוואַלי געוויזן אָדער פאַרבאָרגן (ד"ה איידער די shown.bs.popoverאָדער hidden.bs.popoverגעשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די פּאָפּאָווער.

myPopover.toggle()

פּאָטער

כיידז און דיסטרויז אַן עלעמענט ס פּאָפּאָווער (רעמאָוועס סטאָרד דאַטן אויף די DOM עלעמענט). פּאָפּאָווערס וואָס נוצן דעלאַגיישאַן (וואָס זענען באשאפן מיט די selectorאָפּציע ) קענען ניט זיין ינדיווידזשואַלי חרובֿ אויף אָפּשטאַמלינג צינגל עלעמענטן.

myPopover.dispose()

געבן

גיט אַן עלעמענט ס פּאָפּאָווער די פיייקייט צו זיין געוויזן. פּאָפּאָווערס זענען ענייבאַלד דורך פעליקייַט.

myPopover.enable()

דיסייבאַל

רימוווז די פיייקייט צו ווייַזן אַן עלעמענט ס פּאָפּאָווער. דער פּאָפּאָווער וועט זיין געוויזן בלויז אויב עס איז שייַעך-ענייבאַלד.

myPopover.disable()

toggleEnabled

באַשטימען די פיייקייט צו ווייַזן אָדער באַהאַלטן די פּאָפּאָווער פון אַן עלעמענט.

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

געשעענישן

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