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

איבערבליק

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

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

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

ביישפילן

געבן פּאָפּאָווערס

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

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

לעבן דעמאָ

מיר נוצן דזשאַוואַסקריפּט ענלעך צו די סניפּאַט אויבן צו מאַכן די פאלגענדע לעבן פּאָפּאָווער. טיטלען זענען באַשטימט דורך data-bs-titleאון גוף אינהאַלט איז באַשטימט דורך data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

פיר אינסטרוקציעס

פיר אָפּציעס זענען בנימצא: שפּיץ, רעכט, דנאָ און לינקס. אינסטרוקציעס זענען שפּיגל ווען ניצן Bootstrap אין RTL. שטעלן data-bs-placementצו טוישן די ריכטונג.

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

מנהגcontainer

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

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

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

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

מנהג פּאָפּאָווערס

איר קענען קאַסטאַמייז די אויסזען פון פּאָפּאָווערס ניצן CSS וועריאַבאַלז . מיר שטעלן אַ מנהג קלאַס מיט data-bs-custom-class="custom-popover"צו פאַרנעם אונדזער מנהג אויסזען און נוצן עס צו אָווועררייד עטלעכע פון ​​די היגע CSS וועריאַבאַלז.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

אָפּזאָגן אויף ווייַטער גיט

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

וועריאַבאַלז

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

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

סאָס וועריאַבאַלז

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

באַניץ

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

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

אָפּציעס

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

זינט Bootstrap 5.2.0, אַלע קאַמפּאָונאַנץ שטיצן אַן יקספּערמענאַל רעזערווירט דאַטן אַטריביוט data-bs-configוואָס קענען זיין אַ פּשוט קאָמפּאָנענט קאַנפיגיעריישאַן ווי אַ JSON שטריקל. ווען אַן עלעמענט האט data-bs-config='{"delay":0, "title":123}'און data-bs-title="456"אַטריביוץ, די לעצט titleווערט וועט זיין 456און די באַזונדער דאַטן אַטריביוץ וועט אָווועררייד וואַלועס געגעבן אויף data-bs-config. אין אַדישאַן, די יגזיסטינג דאַטן אַטריביוץ זענען ביכולת צו הויז JSON וואַלועס ווי data-bs-delay='{"show":0,"hide":150}'.

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

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

מעטהאָדס

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

געשעענישן

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