Popovers

Dogfennaeth ac enghreifftiau ar gyfer ychwanegu popovers Bootstrap, fel y rhai a geir yn iOS, at unrhyw elfen ar eich gwefan.

Trosolwg

Pethau i'w gwybod wrth ddefnyddio'r ategyn popover:

• Mae Popovers yn dibynnu ar Popper llyfrgell 3ydd parti ar gyfer lleoli. Rhaid i chi gynnwys popper.min.js cyn bootstrap.js neu use bootstrap.bundle.min.js/ bootstrap.bundle.jssy'n cynnwys Popper er mwyn i popovers weithio!
• Mae Popovers angen yr ategyn tooltip fel dibyniaeth.
• Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js .
• Mae popovers yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
• Ni fydd sero-hyd titlea contentgwerthoedd byth yn dangos popover.
• Nodwch container: 'body'er mwyn osgoi problemau rendro mewn cydrannau mwy cymhleth (fel ein grwpiau mewnbwn, grwpiau botwm, ac ati).
• Ni fydd sbarduno popovers ar elfennau cudd yn gweithio.
• Rhaid sbarduno popovers ar gyfer .disabledneu disabledelfennau ar elfen lapio.
• Pan gânt eu hysgogi o angorau sy'n lapio ar draws llinellau lluosog, bydd popovers yn cael eu canoli rhwng lled cyffredinol yr angorau. Defnyddiwch .text-nowrapar eich <a>s i osgoi'r ymddygiad hwn.
• Rhaid cuddio popovers cyn i'w elfennau cyfatebol gael eu tynnu o'r DOM.
• Gellir sbarduno popovers diolch i elfen y tu mewn i DOM cysgodol.

Daliwch ati i ddarllen i weld sut mae popovers yn gweithio gyda rhai enghreifftiau.

Enghraifft: Galluogi popovers ym mhobman

Un ffordd o gychwyn pob popover ar dudalen fyddai eu dewis yn ôl eu data-togglepriodoledd:

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

Enghraifft: Defnyddio'r containeropsiwn

Pan fydd gennych rai arddulliau ar elfen rhiant sy'n ymyrryd â popover, byddwch am nodi arferiad containerfel bod HTML y popover yn ymddangos o fewn yr elfen honno yn lle hynny.

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

Enghraifft

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

Pedwar cyfeiriad

Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith.

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

Diystyru ar y clic nesaf

Defnyddiwch y focussbardun i ddiystyru popovers ar glic nesaf y defnyddiwr ar elfen wahanol i'r elfen togl.

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

Elfennau anabl

Nid yw elfennau gyda'r disabledpriodoledd yn rhyngweithiol, sy'n golygu na all defnyddwyr hofran na chlicio arnynt i sbarduno popover (neu gyngor). Fel ateb, byddwch chi eisiau sbarduno'r popover o ddeunydd lapio <div>neu <span>a diystyru'r pointer-eventselfen anabl.

Ar gyfer sbardunau popover anabl, efallai y byddai'n well gennych hefyd data-trigger="hover"fel bod y popover yn ymddangos fel adborth gweledol uniongyrchol i'ch defnyddwyr oherwydd efallai na fyddant yn disgwyl clicio ar elfen anabl.

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

Defnydd

Galluogi popovers trwy JavaScript:

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

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-animation="".

Dulliau

$().popover(options)

Yn cychwyn popovers ar gyfer casgliad elfennau.

.popover('show')

Yn datgelu popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos (hy cyn i'r shown.bs.popoverdigwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover. Nid yw popovers y mae eu teitl a'u cynnwys o hyd sero byth yn cael eu harddangos.

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

.popover('hide')

Yn cuddio popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei guddio (hy cyn i'r hidden.bs.popoverdigwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover.

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

.popover('toggle')

Toglo popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos neu ei guddio (hy cyn i'r digwyddiad shown.bs.popoverneu'r hidden.bs.popoverdigwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover.

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

.popover('dispose')

Yn cuddio ac yn dinistrio popover elfen. Ni all popovers sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector ) gael eu dinistrio'n unigol ar elfennau sbardun disgynyddion .

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

.popover('enable')

Yn rhoi'r gallu i popover elfen gael ei ddangos. Mae popovers yn cael eu galluogi yn ddiofyn.

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

.popover('disable')

Yn dileu'r gallu i ddangos popover elfen. Dim ond os caiff ei ail-alluogi y bydd y popover yn gallu cael ei ddangos.

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

.popover('toggleEnabled')

Toglo'r gallu i popover elfen gael ei ddangos neu ei guddio.

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

.popover('update')

Yn diweddaru lleoliad popover elfen.

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

Digwyddiadau

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