Bafutsana

Kakaretso

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

• Popovers e itšetlehile ka laeborari ea mokha oa boraro ea Popper bakeng sa maemo. U tlameha ho kenyelletsa popper.min.js pele ho bootstrap.js kapa sebelisa bootstrap.bundle.min.js/ bootstrap.bundle.jse nang le Popper e le hore popovers e sebetse!
• Li-Popovers li hloka plugin ea tooltip e le ho itšetleha.
• 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.

Mohlala: Lumella li-popovers hohle

Mokhoa o mong oa ho qala li-popovers tsohle leqepheng e tla ba ho li khetha ho latela data-bs-togglesemelo sa tsona:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Mohlala: Ho sebelisa containerkhetho

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.

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

Mohlala

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

Litsela tse 'ne

Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali. Litaelo li bonts'oa ha u sebelisa Bootstrap ho 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>

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

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>

Sass

Lintho tse fapaneng

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

Tšebeliso

Lumella li-popover ka JavaScript:

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

Dikgetho

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

Ho sebelisa ts'ebetso lepopperConfig

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

Mekhoa

bontsha

E hlahisa poover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa (ke hore pele shown.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo. Li-Popovers tseo sehlooho le litaba tsa tsona li leng bolelele ba lefela ha ho mohla li hlahisoang.

myPopover.show()

pata

E pata popo ea lintho. E khutlela ho ea letselitseng pele popover e patiloe (ke hore pele hidden.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.

myPopover.hide()

toggle

E fetola popover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.popoverkapa hidden.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.

myPopover.toggle()

lahla

E pata le ho senya popover ea element (E tlosa data e bolokiloeng ho element ea DOM). Li-Popovers tse sebelisang moifo (tse entsoeng ho sebelisoa khetho selector) li ke ke tsa senngoa ka bonngoe ho latela likarolo tse qalang.

myPopover.dispose()

nolofalletsa

E fa element's popover bokhoni ba ho bonts'a. Li-Popovers li lumelloa ka mokhoa oa kamehla.

myPopover.enable()

tima

E tlosa bokhoni ba ho hlahisa popover ea element. Popover e tla bonts'oa feela ha e buletsoe hape.

myPopover.disable()

toggleEnabled

E fetola bokhoni ba popover ea element hore e bontšoe kapa e patehe.

myPopover.toggleEnabled()

nchafatsa

E kaonefatsa boemo ba elemente popover.

myPopover.update()

getInstance

Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa popover o amanang le ntho ea DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa popover o amanang le ntho ea DOM, kapa u thehe e ncha haeba e sa qalisoa.

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Liketsahalo

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