Bafutsana

Kakaretso

Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea popover:

• Popovers e itšetlehile ka laeborari ea batho ba boraro ea Popper bakeng sa maemo. U tlameha ho kenyelletsa popper.min.js pele ho bootstrap.js, kapa u sebelise e bootstrap.bundle.min.jsnang le Popper.
• Li-Popovers li hloka plugin ea popover joalo ka ts'epo.
• Li-Popovers li khetha ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
• Bolelele ba zero titlele contentlitekanyetso li ke ke tsa bontša popover.
• Hlakisa container: 'body'ho qoba ho fana ka mathata ka likarolo tse rarahaneng (joalo ka lihlopha tsa rona tsa ho kenya, lihlopha tsa likonopo, joalo-joalo).
• Ho kenya li-popover linthong tse patiloeng ho ke ke ha sebetsa.
• Li-Popovers tsa .disabledkapa disabledli-elementi li tlameha ho hlahisoa holim'a karolo ea wrapper.
• Ha li ts'oaroa ho tsoa ho li-ankora tse pota-potileng mela e mengata, li-popover li tla behoa bohareng ba bophara ba li-ankora. Sebelisa .text-nowrapho hao <a>ho qoba boitšoaro bona.
• Li-Popovers li tlameha ho patoa pele likarolo tsa tsona tse tsamaellanang li tlosoa ho DOM.
• Popovers e ka hlahisoa ka lebaka la ntho e ka hare ho moriti oa DOM.

Tsoela pele ho bala ho bona hore na popover e sebetsa joang ka mehlala e meng.

Mehlala

Lumella li-popovers

Joalokaha ho boletsoe ka holimo, o tlameha ho qala li-popover pele li ka sebelisoa. Tsela e 'ngoe ea ho qala li-popovers tsohle leqepheng e tla ba ho li khetha ka data-bs-toggletšobotsi ea tsona, joalo ka:

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

Pontšo e phelang

Re sebelisa JavaScript e tšoanang le snippet e ka holimo ho fana ka popover e latelang. Litlotla li behiloe ka ho sebelisa data-bs-title'me litaba tsa' mele li hlophisoa ka 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>

Litsela tse 'ne

Ho na le likhetho tse 'ne: holimo, ho le letona, tlase le ho le letšehali. Litaelo li bonts'oa ha u sebelisa Bootstrap ho RTL. Beha data-bs-placementho fetola tsela.

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

Tloaelocontainer

Ha u e-na le mekhoa e meng ea ntho ea motsoali e sitisang popover, u tla batla ho hlalosa tloaelo containere le hore HTML ea popover e hlahe ka har'a ntho eo ho e-na le hoo. Sena se tloaelehile litafoleng tse arabelang, lihlopha tsa ho kenya letsoho, joalo-joalo.

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

Boemo bo bong moo u tla batla ho beha tloaelo e hlakileng containerke popovers ka hare ho modal dialog , ho etsa bonnete ba hore popover ka boeona e kenyelelitsoe ho modal. Sena se bohlokoa haholo bakeng sa li-popovers tse nang le likarolo tse sebetsanang - lipuisano tsa modal li tla ts'oara maikutlo, kahoo ntle le haeba popover e le karolo ea ngoana ea modal, basebelisi ba ke ke ba khona ho tsepamisa maikutlo kapa ho kenya tšebetsong likarolo tsena tse sebetsanang.

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

Li-popovers tse tloaelehileng

U ka khona ho etsa ponahalo ea popover u sebelisa mefuta e fapaneng ea CSS . Re theha sehlopha sa tloaelo data-bs-custom-class="custom-popover"ho lekanya ponahalo ea rona ea tloaelo le ho e sebelisa ho feta tse ling tsa mefuta ea CSS ea lehae.

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

Tlosa ho tobetsa e latelang

Sebelisa focusseqhutsu ho leleka li-popovers ha mosebelisi a tobetsa ntho e latelang e fapaneng le ea toggle element.

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

Lintho tse holofetseng

Lintho tse nang le disabledtšobotsi ha li sebelisane, ho bolelang hore basebelisi ba ke ke ba li sutumelletsa kapa ba li tobetse ho etsa hore popover (kapa tooltip). Joalo ka mokhoa oa ho sebetsa, o tla batla ho tsosa popover ho tsoa ho sephutheloana <div>kapa <span>, e etselitsoeng hore keyboard e tsepamise maikutlo ho sebelisoa tabindex="0".

Bakeng sa li-triggers tsa popover tse nang le bokooa, u kanna ua khetha data-bs-trigger="hover focus"hore popover e hlahe e le maikutlo a hanghang ho basebelisi ba hau kaha ba kanna ba se lebelle ho tobetsa ntho e holofetseng.

<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

Lintho tse fapaneng

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, popovers joale ba sebelisa mefuta-futa ea CSS ea lehae .popoverbakeng sa ho ntlafatsa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, ​​le oona.

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

Mefuta e fapaneng ea Sass

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

Tšebeliso

Lumella li-popover ka JavaScript:

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

Dikgetho

Kaha likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript, u ​​ka kenyelletsa lebitso la khetho ho data-bs-, joalo ka data-bs-animation="{value}". Etsa bonnete ba hore o fetola mofuta oa nyeoe ea lebitso la khetho ho tloha " camelCase "ho " kebab-case " ha o fetisa likhetho ka litšobotsi tsa data. Ka mohlala, sebelisa data-bs-custom-class="beautifier"ho e-na le data-bs-customClass="beautifier".

Ho tloha ka Bootstrap 5.2.0, likarolo tsohle li ts'ehetsa tlhahlobo ea data e bolokiloeng data-bs-confige ka bolokang tlhophiso e bonolo ea karolo joalo ka khoele ea JSON. Ha element e na data-bs-config='{"delay":0, "title":123}'le data-bs-title="456"litšoaneleho, boleng ba ho qetela titlebo tla ba 456'me lintlha tse arohaneng tsa data li tla feta boleng bo fanoeng ho data-bs-config. Ntle le moo, litšoaneleho tse teng tsa data li khona ho boloka boleng ba JSON joalo ka data-bs-delay='{"show":0,"hide":150}'.

Ho sebelisa ts'ebetso lepopperConfig

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

Mekhoa

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

Liketsahalo

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