Popovers

Belgekirin û nimûneyên ji bo zêdekirina popoverên Bootstrap, mîna yên ku di iOS-ê de têne dîtin, li her hêmanek li ser malpera we.

Têgihiştinî

Tiştên ku divê hûn zanibin dema ku pêveka popover bikar tînin:

• Popover ji bo pozîsyonê xwe dispêrin pirtûkxaneya partiya sêyemîn Popper.js . Divê hûn berî bootstrap.js -ê popper.min.js-ê têxinbootstrap.bundle.min.js nav xwe an jî bikar bînin / bootstrap.bundle.jsya ku Popper.js dihewîne da ku popover kar bikin!
• Popover pêveka tooltip -ê wekî pêvedanê hewce dike.
• Heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dikeutil.js .
• Popover ji ber sedemên performansê têne hilbijartin, ji ber vê yekê divê hûn bi xwe wan dest pê bikin .
• Zero-dirêj titleû contentnirx dê ti carî popoverek nîşan nedin.
• Diyar container: 'body'bikin ku hûn di hêmanên tevlihevtir de (mîna komên têketina me, komên bişkokê, hwd) pirsgirêkan çênekin.
• Vekirina popoverên li ser hêmanên veşartî dê nexebite.
• Pêdivî ye ku popoverên ji bo .disabledan disabledhêmanan li ser hêmanek pêçandî werin avêtin.
• Dema ku ji lengerên ku li gelek rêzan diqelibin werin avêtin, popover dê di navbera firehiya giştî ya lengeran de bibin navend. .text-nowrapLi ser s-ya xwe bikar bînin <a>ku ji vê tevgerê dûr bixin.
• Berî ku hêmanên wan ên têkildar ji DOM-ê werin rakirin divê popover werin veşartin.
• Popover dikarin bi saya hêmanek di hundurê DOM-a siya de werin dest pê kirin.

Xwendina xwe bidomînin da ku bibînin ka popover çawa bi hin mînakan re dixebitin.

Mînak: Li her derê popovers çalak bike

Yek rê ji bo destpêkirina hemî popoverên li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-togglehilbijêrin:

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

Mînak: Vebijêrk bikar containertînin

Gava ku we hin şêwazên li ser hêmanek dêûbav hene ku mudaxeleyî popoverekê dikin, hûn ê bixwazin ku xwerûyek diyar bikin containerda ku li şûna wê HTML-a popover di hundurê wê hêmanê de xuya bibe.

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

Mînak

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

Çar rê

Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.

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

Li ser klîkek paşîn veqetînin

Tetikê bikar focusbînin da ku popoverên li ser klîkek paşîn a bikarhêner a hêmanek cûda ji hêmana veguheztinê dûr bixe.

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

hêmanên astengdar

Hêmanên bi disabledtaybetmendiyê ne înteraktîf in, yanî bikarhêner nikanin li wan bizivirin an bikirtînin da ku popoverek (an şîretek amûrek) bişopînin. Wekî çareseriyek, hûn ê bixwazin ku popoverê ji pêçekê vekin <div>an <span>û pointer-eventsli ser hêmana neçalak bişopînin.

Ji bo pêlên popover ên neçalak, hûn dikarin her weha tercîh data-trigger="hover"bikin da ku popover ji bikarhênerên we re wekî bertekek dîtbarî ya tavilê xuya bibe ji ber ku ew ne li bendê ne ku li ser hêmanek neçalak bikirtînin .

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

Bikaranîna

Bi JavaScriptê popovers çalak bikin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-animation="".

Methods

$().popover(options)

Ji bo berhevokek hêmanan popoveran dide destpêkirin.

.popover('show')

Popovera hêmanek eşkere dike. Berî ku popover bi rastî were xuyang kirin (ango berî ku shown.bs.popoverbûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana popover tê hesibandin. Popoverên ku hem sernav û hem jî naveroka wan sifir-dirêj in qet nayên xuyang kirin.

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

.popover('hide')

Hêmanek popover vedişêre. Berî ku popover bi rastî veşêre (ango berî ku hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

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

.popover('toggle')

Pîvana hêmanekê vedike. Berî ku popover bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.popoveran hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

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

.popover('dispose')

Hêmanek popover vedişêre û hilweşîne. Popoverên ku delegasyonê bikar tînin (yên ku bi karanîna vebijarkê selectortêne afirandin ) nekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.

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

.popover('enable')

Kapasîteya nîşankirinê dide popovera hêmanan. Popover ji hêla xwerû ve têne çalak kirin.

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

.popover('disable')

Kapasîteya ku popovera hêmanek were xuyang kirin jê dike. Popover tenê heke ji nû ve were çalak kirin dê bikaribe were xuyang kirin.

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

.popover('toggleEnabled')

Desthilatdariya popovera hêmanek ku were xuyang kirin an veşartî vedike.

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

.popover('update')

Helwesta popovera hêmanekê nûve dike.

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

Events

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