Popovers

Txheej txheem cej luam

Tej yam uas yuav tsum paub thaum siv lub popover plugin:

• Popovers cia siab rau lub tsev qiv ntawv thib peb Popper rau qhov chaw. Koj yuav tsum suav nrog popper.min.js ua ntej bootstrap.js, lossis siv ib qho bootstrap.bundle.min.jsuas muaj Popper.
• Popovers xav tau lub popover plugin ua qhov kev vam khom.
• Popovers yog opt-in rau kev ua tau zoo vim li cas, yog li koj yuav tsum pib lawv tus kheej .
• Zero-ntev titlethiab contentqhov tseem ceeb yuav tsis pom qhov popover.
• Qhia container: 'body'kom tsis txhob muaj teeb meem nyob rau hauv cov khoom siv ntau dua (xws li peb cov tswv yim pab pawg, pawg khawm, thiab lwm yam).
• Triggering popovers ntawm cov ntsiab lus zais yuav tsis ua haujlwm.
• Popovers rau .disabledlos yog disabledcov ntsiab lus yuav tsum tau ua rau ntawm cov khoom siv wrapper.
• Thaum tshwm sim los ntawm cov thauj tog rau nkoj uas qhwv hla ntau kab, popovers yuav nyob nruab nrab ntawm cov thauj tog rau nkoj 'tag nrho dav. Siv .text-nowrapkoj <a>tus kheej kom tsis txhob muaj tus cwj pwm no.
• Popovers yuav tsum tau muab zais ua ntej lawv cov ntsiab lus sib raug tau raug tshem tawm ntawm DOM.
• Popovers tuaj yeem tshwm sim ua tsaug rau ib qho hauv ib qho duab ntxoov ntxoo DOM.

Khaws nyeem kom pom tias popovers ua haujlwm li cas nrog qee qhov piv txwv.

Piv txwv

Qhib popovers

Raws li tau hais los saum no, koj yuav tsum pib popovers ua ntej lawv tuaj yeem siv tau. Ib txoj hauv kev los pib tag nrho cov popovers ntawm nplooj ntawv yuav yog xaiv lawv los ntawm lawv cov data-bs-togglecwj pwm, xws li:

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

Nyob demo

Peb siv JavaScript zoo ib yam li cov snippet saum toj no los ua cov nram qab no nyob popover. Lub npe yog teem los ntawm data-bs-titlethiab lub cev cov ntsiab lus yog teem los ntawm 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>

Plaub txoj kev

Muaj plaub txoj kev xaiv: sab saum toj, sab xis, hauv qab, thiab sab laug. Cov lus qhia tau mirrored thaum siv Bootstrap hauv RTL. Teem data-bs-placementkom hloov cov kev taw qhia.

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

Kev caicontainer

Thaum koj muaj qee tus qauv ntawm niam txiv lub caij uas cuam tshuam nrog lub popover, koj yuav xav qhia qhov kev cai containerkom cov popover's HTML tshwm nyob rau hauv cov khoom ntawd. Qhov no tshwm sim hauv cov lus teb, pab pawg tswv yim, thiab lwm yam.

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

Lwm qhov xwm txheej uas koj yuav xav teeb tsa qhov kev cai tshwj containerxeeb yog popovers hauv kev sib tham modal , kom paub tseeb tias qhov popover nws tus kheej tau ntxiv rau lub modal. Qhov no yog qhov tseem ceeb tshwj xeeb tshaj yog rau cov popovers uas muaj cov ntsiab lus sib tham - modal dialogs yuav teeb tsom, yog li tshwj tsis yog lub popover yog ib qho me me ntawm cov modal, cov neeg siv yuav tsis tuaj yeem tsom lossis qhib cov ntsiab lus sib tham.

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

Kev cai popovers

Koj tuaj yeem kho qhov pom ntawm popovers siv CSS variables . Peb tau teeb tsa chav kawm kev cai nrog data-bs-custom-class="custom-popover"kom muaj peev xwm ua tau raws li peb qhov kev cai thiab siv nws los hla qee qhov kev hloov pauv hauv CSS hauv zos.

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

Tshem tawm ntawm qhov nyem tom ntej

Siv qhov focusua kom tshem tawm cov popovers ntawm tus neeg siv tom ntej nyem ntawm ib lub caij sib txawv dua li qhov hloov pauv.

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

Cov neeg xiam oob qhab

Cov ntsiab lus nrog tus disabledcwj pwm tsis sib cuam tshuam, txhais tau tias cov neeg siv tsis tuaj yeem txav los yog nyem rau lawv kom ua rau popover (lossis cov lus qhia). Raws li kev daws teeb meem, koj yuav xav ua kom lub popover los ntawm lub wrapper <div>los yog <span>, qhov zoo tshaj plaws ua keyboard-focusable siv tabindex="0".

Rau cov neeg xiam oob qhab popover tshwm sim, koj kuj xav tau data-bs-trigger="hover focus"kom lub popover tshwm tam sim pom kev tawm tswv yim rau koj cov neeg siv vim lawv yuav tsis xav tias yuav nyem rau ntawm qhov chaw tsis taus.

<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

Hloov pauv

Raws li ib feem ntawm Bootstrap qhov kev hloov pauv CSS hloov pauv mus kom ze, popovers tam sim no siv cov CSS hauv zos .popoverrau kev hloov kho lub sijhawm tiag tiag. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

  --#{$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);
  

Sass variables

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

Kev siv

Qhib popovers ntawm JavaScript:

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

Kev xaiv

Raws li kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, koj tuaj yeem ntxiv ib qho kev xaiv npe rau data-bs-, xws li hauv data-bs-animation="{value}". Nco ntsoov hloov cov ntaub ntawv ntawm lub npe xaiv los ntawm " camelCase " mus rau " kebab-case " thaum dhau cov kev xaiv ntawm cov ntaub ntawv cwj pwm. Piv txwv li, siv data-bs-custom-class="beautifier"es tsis txhob data-bs-customClass="beautifier".

Raws li ntawm Bootstrap 5.2.0, tag nrho cov khoom txhawb nqa qhov kev sim khaws tseg cov ntaub ntawv tus cwj pwm data-bs-configuas tuaj yeem ua tsev yooj yim kev teeb tsa raws li JSON txoj hlua. Thaum ib qho khoom muaj data-bs-config='{"delay":0, "title":123}'thiab data-bs-title="456"tus cwj pwm, qhov kawg titletus nqi yuav yog 456thiab cov ntaub ntawv cais cov cwj pwm yuav override tus nqi muab rau data-bs-config. Ntxiv mus, cov ntaub ntawv uas twb muaj lawm muaj peev xwm ua tsev JSON qhov tseem ceeb xws li data-bs-delay='{"show":0,"hide":150}'.

Siv ua haujlwm nrogpopperConfig

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

Cov txheej txheem

// 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'
})

Cov xwm txheej

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