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.js 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.js tapno agtrabaho dagiti popovers!
• Dagiti Popovers ket agkasapulan ti tooltip plugin a kas maysa a panagpanpanunot.
• 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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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)

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

Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a “manual” triggering of the popover. Popovers whose both title and content are zero-length are never displayed.

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

.popover('hide')

Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

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

.popover('toggle')

Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover or hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

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

.popover('dispose')

Hides and destroys an element’s popover. Popovers that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

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

.popover('enable')

Gives an element’s popover the ability to be shown. Popovers are enabled by default.

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

.popover('disable')

Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.

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

.popover('toggleEnabled')

Toggles the ability for an element’s popover to be shown or hidden.

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

.popover('update')

Updates the position of an element’s popover.

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

Events

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