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

דאַקיומענטיישאַן און ביישפילן פֿאַר אַדינג באָאָטסטראַפּ פּאָפּאָווערס, ווי די געפֿונען אין יאָס, צו קיין עלעמענט אויף דיין פּלאַץ.

איבערבליק

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

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

די אַנאַמיישאַן ווירקונג פון דעם קאָמפּאָנענט איז אָפענגיק אויף די prefers-reduced-motionמידיאַ אָנפֿרעג. זען די רידוסט באַוועגונג אָפּטיילונג פון אונדזער אַקסעסאַביליטי דאַקיומענטיישאַן .

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

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

איין וועג צו ינישאַלייז אַלע פּאָפּאָווערס אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער data-toggleאַטריביוט:

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

בייַשפּיל: ניצן די `container`אָפּציע

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

ספּעציפיש מאַרקאַפּ פארלאנגט פֿאַר אָפּזאָגן-אויף-ווייַטער-גיט

פֿאַר געהעריק קרייז-בלעטערער און קרייַז-פּלאַטפאָרמע נאַטור, איר מוזן נוצן דעם <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אַטריביוט זענען נישט ינטעראַקטיוו, טייַטש די ניצערס קענען נישט האָווער אָדער גיט זיי צו צינגל אַ פּאָפּאָווער (אָדער טאָאָלטיפּ). ווי אַ וואָרקאַראָונד, איר וועט וועלן צו צינגל די פּאָפּאָווער פון אַ ראַפּער <div>אָדער <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>

באַניץ

געבן פּאָפּאָווערס דורך דזשאַוואַסקריפּט:

$('#example').popover(options)

גפּו אַקסעלעריישאַן

פּאָפּאָווערס מאל דערשייַנען בלערי אויף Windows 10 דעוויסעס רעכט צו גפּו אַקסעלעריישאַן און אַ מאַדאַפייד סיסטעם דפּי. די וואָרקאַראָונד פֿאַר דעם אין v4 איז צו דיסייבאַל גפּו אַקסעלעריישאַן ווי דארף אויף דיין פּאָפּאָווערס.

פארגעלייגט פאַרריכטן:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

מאַכן פּאָפּאָווערס אַרבעט פֿאַר קלאַוויאַטור און אַסיסטאַנט טעכנאָלאָגיע ניצערס

צו לאָזן קלאַוויאַטור ניצערס צו אַקטאַווייט דיין פּאָפּאָווערס, איר זאָל נאָר לייגן זיי צו HTML עלעמענטן וואָס זענען טראַדישאַנאַלי קלאַוויאַטור-פאָוקאָוסאַבאַל און ינטעראַקטיוו (אַזאַ ווי לינקס אָדער פאָרעם קאָנטראָלס). כאָטש אַרביטראַריש HTML עלעמענטן (אַזאַ ווי <span>s) קענען זיין פאָוקיסטאַבאַל דורך אַדינג די tabindex="0"אַטריביוט, דאָס וועט לייגן פּאַטענטשאַלי אַנויינג און קאַנפיוזינג קוויטל סטאַפּס אויף ניט-ינטעראַקטיוו עלעמענטן פֿאַר קלאַוויאַטור יוזערז, און רובֿ אַסיסטיוו טעקנאַלאַדזשיז דערווייַל מעלדן די אינהאַלט פון די פּאָפּאָווער אין דעם סיטואַציע. . אין דערצו, טאָן ניט פאַרלאָזנ זיך בלויז hoverדי צינגל פֿאַר דיין פּאָפּאָווערס, ווייַל דאָס וועט מאַכן זיי אוממעגלעך צו צינגל פֿאַר קלאַוויאַטור יוזערז.

כאָטש איר קענען אַרייַנלייגן רייַך, סטראַקטשערד HTML אין פּאָפּאָווערס מיט די htmlאָפּציע, מיר שטארק רעקאָמענדירן אַז איר ויסמיידן אַדינג אַ יבעריק סומע פון אינהאַלט. די וועג פּאָפּאָווערס איצט אַרבעט איז אַז, אַמאָל געוויזן, זייער אינהאַלט איז טייד צו די צינגל עלעמענט מיט די aria-describedbyאַטריביוט. ווי אַ רעזולטאַט, די גאנצע אינהאַלט פון די פּאָפּאָווער וועט זיין אַנאַונסט צו אַסיסטיוו טעכנאָלאָגיע יוזערז ווי איין לאַנג, אַנינעראַפּטיד טייַך.

דערצו, כאָטש עס איז מעגלעך צו אַרייַננעמען ינטעראַקטיוו קאָנטראָלס (אַזאַ ווי פאָרעם עלעמענטן אָדער פֿאַרבינדונגען) אין דיין פּאָפּאָווער (דורך אַדינג די עלעמענטן צו די whiteListאָדער ערלויבט אַטריביוץ און טאַגס), זיין אַווער אַז דערווייַל די פּאָפּאָווער קען נישט פירן קלאַוויאַטור פאָקוס סדר. ווען אַ קלאַוויאַטור באַניצער עפֿנט אַ פּאָפּאָווער, פאָקוס בלייבט אויף די טריגערינג עלעמענט, און ווי דער פּאָפּאָווער יוזשאַוואַלי טוט נישט מיד נאָכפאָלגן די צינגל אין די דאָקומענט סטרוקטור, עס איז קיין גאַראַנטירן אַז פאָרויס / דרינגלעךTABוועט מאַך אַ קלאַוויאַטור באַניצער אין די פּאָפּאָווער זיך. אין קורץ, פשוט אַדינג ינטעראַקטיוו קאָנטראָלס צו אַ פּאָפּאָווער איז מסתּמא צו מאַכן די קאָנטראָלס אַנריאַטשאַבאַל / אַניוזאַבאַל פֿאַר קלאַוויאַטור יוזערז און יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז, אָדער בייַ מינדסטער מאַכן אַ ילאַדזשיקאַל קוילעלדיק פאָקוס סדר. אין די קאַסעס, באַטראַכטן ניצן אַ מאָדאַל דיאַלאָג אַנשטאָט.

אָפּציעס

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

באַמערקונג אַז פֿאַר זיכערהייט סיבות די sanitize, sanitizeFnאון whiteListאָפּציעס קענען ניט זיין סאַפּלייד מיט דאַטן אַטריביוץ.

נאָמען	טיפּ	פעליקייַט	באַשרייַבונג
אַנאַמיישאַן	בוליאַן	אמת	צולייגן אַ CSS וועלקן יבערגאַנג צו די פּאָפּאָווער
קאנטעינער	שטריקל \| עלעמענט \| פאַלש	פאַלש	אַפּענדז די פּאָפּאָווער צו אַ ספּעציפיש עלעמענט. בייַשפּיל: `container: 'body'`. דער אָפּציע איז דער הויפּט נוציק ווייַל עס אַלאַוז איר צו שטעלן די פּאָפּאָווער אין די לויפן פון דעם דאָקומענט לעבן די טריגערינג עלעמענט - וואָס וועט פאַרמייַדן די פּאָפּאָווער פון פלאָוטינג אַוועק פון די טריגערינג עלעמענט בעשאַס אַ פֿענצטער גרייס.
אינהאַלט	שטריקל \| עלעמענט \| פֿונקציע	''	פעליקייַט אינהאַלט ווערט אויב `data-content`אַטריביוט איז נישט פאָרשטעלן. אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין `this`רעפֿערענץ שטעלן צו די עלעמענט וואָס די פּאָפּאָווער איז אַטאַטשט צו.
פאַרהאַלטן	נומער \| כייפעץ	0	פאַרהאַלטן ווייַזונג און כיידינג די פּאָפּאָווער (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן כייפעץ סטרוקטור איז:`delay: { "show": 500, "hide": 100 }`
HTML	בוליאַן	פאַלש	אַרייַנלייגן HTML אין די פּאָפּאָווער. אויב פאַלש, די `text`מעטאָד פון jQuery וועט זיין געניצט צו אַרייַנלייגן אינהאַלט אין די DOM. ניצן טעקסט אויב איר זענט באַזאָרגט וועגן XSS אנפאלן.
פּלייסמאַנט	שטריקל \| פֿונקציע	'רעכט'	ווי צו שטעלן די פּאָפּאָווער - אַוטאָ \| שפּיץ \| דנאָ \| לינקס \| רעכט. ווען `auto`עס איז ספּעסיפיעד, עס וועט דינאַמיקאַללי ריאָריענט די פּאָפּאָווער. ווען אַ פֿונקציע איז גענוצט צו באַשטימען די פּלייסמאַנט, עס איז גערופן מיט די פּאָפּאָווער DOM נאָדע ווי זיין ערשטער אַרגומענט און די טריגערינג עלעמענט DOM נאָדע ווי זיין רגע. דער `this`קאָנטעקסט איז באַשטימט צו די פּאָפּאָווער בייַשפּיל.
סעלעקטאָר	שטריקל \| פאַלש	פאַלש	אויב אַ סעלעקטאָר איז צוגעשטעלט, פּאָפּאָווער אַבדזשעקץ וועט זיין דעלאַגייטאַד צו די ספּעסיפיעד טאַרגאַץ. אין פיר, דאָס איז געניצט צו געבן דינאַמיש HTML אינהאַלט צו לייגן פּאָפּאָווערס. זען דעם און אַ ינפאָרמאַטיוו בייַשפּיל .
מוסטער	שטריקל	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	באַזע HTML צו נוצן ווען קריייטינג די פּאָפּאָווער. די פּאָפּאָווער ס `title`וועט זיין ינדזשעקטיד אין די `.popover-header`. די פּאָפּאָווער ס `content`וועט זיין ינדזשעקטיד אין די `.popover-body`. `.arrow`וועט ווערן די פּאָפּאָווער ס פייַל. די ויסווייניקסט ראַפּער עלעמענט זאָל האָבן די `.popover`קלאַס.
טיטל	שטריקל \| עלעמענט \| פֿונקציע	''	פעליקייַט טיטל ווערט אויב `title`אַטריביוט איז נישט פאָרשטעלן. אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין `this`רעפֿערענץ שטעלן צו די עלעמענט וואָס די פּאָפּאָווער איז אַטאַטשט צו.
צינגל	שטריקל	'קליק'	ווי פּאָפּאָווער איז טריגערד - גיט \| האָווער \| פאָקוס \| מאַנואַל. איר קען פאָרן קייפל טריגערז; צעטיילן זיי מיט אַ פּלאַץ. `manual`קענען ניט זיין קאַמביינד מיט קיין אנדערע צינגל.
אָפסעט	נומער \| שטריקל	0	אָפסעט פון די פּאָפּאָווער קאָרעוו צו זייַן ציל. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js ס פאָטאָ דאָקומענטן .
פאַלבאַקקפּלייסמאַנט	שטריקל \| מענגע	'פליפּן'	לאָזן צו ספּעציפיצירן וואָס שטעלע פּאָפּער וועט נוצן אויף פאַלבאַק. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js ס נאַטור דאָקומענטן
גרענעץ	שטריקל \| עלעמענט	'סקראָלפּאַרענט'	אָוווערפלאָו קאַנסטריינץ גרענעץ פון די פּאָפּאָווער. אַקסעפּץ די וואַלועס פון `'viewport'`, `'window'`, `'scrollParent'`, אָדער אַן HTMLElement דערמאָנען (בלויז דזשאַוואַסקריפּט). פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js's preventOverflow docs .
סאַניטיזירן	בוליאַן	אמת	געבן אָדער דיסייבאַל די סאַניטיזיישאַן. אויב אַקטיווייטיד `'template'`, `'content'`און `'title'`אָפּציעס וועט זיין סאַניטייזד.
ווייַס רשימה	כייפעץ	פעליקייַט ווערט	אָבדזשעקט וואָס כּולל ערלויבט אַטריביוץ און טאַגס
sanitizeFn	null \| פֿונקציע	null	דאָ איר קענען צושטעלן דיין אייגענע סאַניטיז פונקציע. דאָס קען זיין נוציק אויב איר בעסער וועלן צו נוצן אַ דעדאַקייטאַד ביבליאָטעק צו דורכפירן סאַניטיזיישאַן.
popperConfig	null \| כייפעץ	null	צו טוישן די פעליקייַט Popper.js קאַנפיגיעריישאַן פון Bootstrap, זען די קאַנפיגיעריישאַן פון Popper.js

דאַטאַ אַטריביוץ פֿאַר יחיד פּאָפּאָווערס

אָפּציעס פֿאַר יחיד פּאָפּאָווערס קענען אַלטערנאַטיוועלי זיין ספּעסיפיעד דורך די נוצן פון דאַטן אַטריביוץ, ווי דערקלערט אויבן.

מעטהאָדס

אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז

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

זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע .

`$().popover(options)`

יניטיאַליזעס פּאָפּאָווערס פֿאַר אַן עלעמענט זאַמלונג.

`.popover('show')`

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

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

`.popover('hide')`

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

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

`.popover('toggle')`

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

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

`.popover('dispose')`

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

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

`.popover('enable')`

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

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

`.popover('disable')`

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

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

`.popover('toggleEnabled')`

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

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

`.popover('update')`

דערהייַנטיקונגען די שטעלע פון אַן עלעמענט ס פּאָפּאָווער.

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

געשעענישן

געשעעניש טיפּ	באַשרייַבונג
show.bs.popover	דער געשעעניש פירט גלייך ווען דער `show`בייַשפּיל אופֿן איז גערופן.
געוויזן.בס.פּאָפּאָווער	דער געשעעניש איז פייערד ווען די פּאָפּאָווער איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
hide.bs.popover	דעם געשעעניש איז פייערד מיד ווען די `hide`בייַשפּיל אופֿן איז גערופן.
hidden.bs.popover	דער געשעעניש איז פייערד ווען די פּאָפּאָווער איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
ינסערטאַד.בס.פּאָפּאָווער	דער געשעעניש איז פייערד נאָך די `show.bs.popover`געשעעניש ווען די פּאָפּאָווער מוסטער איז צוגעגעבן צו די DOM.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})