Dagiti Popovers

Dokumentasion ken dagiti pagarigan para iti pananginayon kadagiti Bootstrap popovers, kas kadagidiay masarakan iti iOS, iti ania man nga elemento iti site-mo.

Panangkita iti pakabuklan

Dagiti banag nga ammuen no agusar ti popover plugin:

• Agpannuray dagiti Popovers iti 3rd party library Popper para iti panagposision. Masapul nga iramanmo ti popper.min.js sakbay ti bootstrap.js wenno usarem ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper tapno agtrabaho dagiti popovers!
• Dagiti Popovers ket agkasapulan ti tooltip plugin a kas maysa a panagpannuray.
• No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js .
• Dagiti popovers ket opt-in para kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
• Zero-length titleken contentvalues ​​ket pulos a di mangipakita iti popover.
• Ibaga container: 'body'tapno maliklikan dagiti parikut ti panagiparang kadagiti ad-adu a komplikado a paset (kas dagiti grupo ti panagserrektayo, dagiti grupo ti buton, kdpy).
• Saan nga agtrabaho ti panangtignay kadagiti popover kadagiti nailemmeng nga elemento.
• Dagiti popovers para .disabledwenno disableddagiti elemento ket masapul a mai-trigger iti maysa nga elemento ti balkot.
• No mai-trigger manipud kadagiti angkla a mangbalkot iti adu a linia, dagiti popover ket maisentro iti nagbaetan ti pakabuklan a kalawa dagiti angkla. Usaren .text-nowrapti <a>s-mo tapno maliklikan daytoy a kababalin.
• Masapul a mailemmeng dagiti popovers sakbay a maikkat dagiti katupagda nga elemento manipud iti DOM.
• Mabalin a mai-trigger dagiti popovers gapu iti elemento iti uneg ti shadow DOM.

Itultuloymo ti agbasa tapno makitam no kasano nga agtrabaho dagiti popover babaen ti sumagmamano a pagarigan.

Pagarigan: Pagbalinen dagiti popovers iti sadinoman

Ti maysa a wagas a mangirugi kadagiti amin a popover iti maysa a panid ket isu koma ti panangpili kadagitoy babaen ti data-toggleattributeda:

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

Pagarigan: Panangusar iti containerpagpilian

No addaanka kadagiti sumagmamano nga estilo iti nagannak nga elemento a mangsinga iti popover, kayatmo nga ikeddeng ti maysa a kostumbre containertapno ti HTML ti popover ket agparang ketdi iti uneg dayta nga elemento.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Pagwadan

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

Uppat a direksion

Uppat a pagpilian ti magun-odan: ngato, kannawan, baba, ken kannigid a naitunos.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

Dismiss iti sumaruno nga i-click

Usaren ti focusgatilio tapno mailaksid dagiti popover iti sumaganad a panagpidut ti agar-aramat iti sabali nga elemento ngem ti elemento ti panagbalbaliw.

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

Dagiti baldado nga elemento

Dagiti elemento nga addaan iti disabledattribute ket saan nga interaktibo, kayatna a sawen a dagiti agar-aramat ket dida mabalin ti ag-hover wenno ag-klik kadagitoy tapno mangtignay ti popover (wenno tooltip). Kas maysa a panagliklik, kayatmo a mangtignay ti popover manipud iti maysa a wrapper <div>wenno <span>ken i-override ti pointer-eventsiti baldado nga elemento.

Para kadagiti baldado a popover a mangtignay, mabalinmo pay a kaykayat data-trigger="hover"tapno ti popover ket agparang a kas ti dagus a biswal a sungbat kadagiti agar-aramatmo a kas mabalin a dida namnamaen a mangi -klik iti maysa a baldado nga elemento.

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

Panagusar

Pagbalinen dagiti popover babaen ti JavaScript:

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

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

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-animation="".

Dagiti Pamay-an

$().popover(options)

Mangrugi kadagiti popovers para iti maysa a koleksion ti elemento.

.popover('show')

Ipalgakna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti popover (kayatna a sawen sakbay a shown.bs.popovermapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti popover. Dagiti popover a ti paulo ken linaonda ket agpada a zero-length ket saan a pulos a maiparang.

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

.popover('hide')

Ilemmengna ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti popover (kayatna a sawen sakbay a hidden.bs.popovermapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti popover.

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

.popover('toggle')

I-toggles ti popover ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti popover (kayatna a sawen sakbay a mapasamak ti shown.bs.popoverwenno hidden.bs.popoverpasamak). Maibilang daytoy a “manual” a panangtignay iti popover.

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

.popover('dispose')

Ilemmeng ken dadaelenna ti popover ti maysa nga elemento. Dagiti popover nga agus-usar ti delegasion (a naparsua babaen ti panagusar ti selectorpagpilian ) ket saan a mabalin a saggaysa a madadael kadagiti kaputotan a mangtignay nga elemento.

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

.popover('enable')

Mangted ti popover ti maysa nga elemento ti abilidad a maipakita. Dagiti popover ket napalubosan babaen ti default.

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

.popover('disable')

Ikkaten ti abilidad para iti popover ti maysa nga elemento a maipakita. Mabalin laeng a maipakita ti popover no ma-enable manen.

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

.popover('toggleEnabled')

I-toggles ti abilidad para iti popover ti maysa nga elemento a maipakita wenno mailemmeng.

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

.popover('update')

Ipabaro ti posision ti popover ti maysa nga elemento.

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

Dagiti Pasamak

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