Popovers

Qillqakuna chaymanta ejemplokuna Bootstrap popovers yapanapaq, iOS kaqpi tarisqa hina, mayqin elemento kaqmanpas sitioykipi.

Hatun qhawariy

Imakuna yachanapaq popover plugin kaqwan llamk'achkaspa:

• Popovers 3 kaq parti biblioteca Popper nisqapi hapipakunku posición nisqapaq. Popper.min.js manaraq bootstrap.js kaqmanta churanayki tiyan utaq bootstrap.bundle.min.js/ llamk'achiy bootstrap.bundle.jsmayqinchus Popper kaqta hap'in popovers llamk'ananpaq!
• Popovers huk yanapakuy hina yanapakuypa yanapakuyninta mañakun.
• Sichus JavaScriptniykumanta pukyuta ruwachkanki, chayta munanutil.js .
• Popovers ruwayrayku opt-in kanku, chayrayku qam kikiyki qallarichinayki tiyan .
• Cero-largo titley contentvalores nisqakunaqa manan hayk’aqpas popover nisqataqa rikuchinqachu.
• container: 'body'Aswan sasa componentekunapi (yaykuna huñuyku, ñit'ina huñukuna, hukkuna hina) sasachakuykunata mana ruwaypaq willay .
• Pakasqa elementokunapi popoverkunata qallarichiyqa manam llamkanqachu.
• Popovers para .disabledo disabledelementos deben ser desencadenadas en un elemento de envoltura.
• Achka chirukunata p’istuykuq anclakunamanta llamk’achisqa kaqtinqa, popovers nisqakunaqa anclakunap tukuy anchon chawpipi chawpichasqa kanqa. Utilizar .text-nowrapen tu <a>s para evitar este comportamiento.
• Popovers nisqakunaqa pakasqam kanan manaraq DOM nisqamanta tupaqnin elementokuna hurqusqa kachkaptin.
• Popovers nisqaqa huk llantu DOM ukhupi huk elementoman gracias nisqawanmi llamk'achisqa kanman.

Ñawinchayllapuni imaynatachus popovers wakin ejemplokunawan llamk’anku chayta qhawanaykipaq.

Ejemplo: Tukuy hinantinpi popovers nisqakunata atichiy

Huk ñan huk p'anqapi llapa popovers qallariypaq kanman akllay data-toggleatributonkuman hina:

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

Ejemplo: containerOpción nisqawan yanapachikuspa

Mayk'aq wakin estilokuna huk tayta elemento kaqpi kanki chaymanta huk popover kaqwan hark'an, huk sapanchasqa willayta munanki chaymanta containerpopover kaqpa HTML chay elemento ukhupi rikukun chaypa rantinpi.

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

Qatina

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

Tawa ñankuna

Tawa akllanakuna kan: pata, paña, uray, lluq'i chiqanchasqa.

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

Qatiqnin ñit’iypiqa qarquy

Gatillota focusllamk'achiy popovers kaqmanta llamk'achiqpa qatiqnin ñit'iyninpi huk elementomanta mana toggle elementomanta qarqunapaq.

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

Mana atiq elementokuna

Atributoyuq elementokuna disabledmana interactivochu kanku, niyta munan llamk'aqkuna mana hover utaq ñit'iyta atinkuchu huk popover (utaq yanapakuypa yuyaychaynin) llamk'achinapaq. Huk allichay hina, huk p'istumanta popover llamk'achiyta munanki <div>utaq <span>chaymanta pointer-eventsmana atichisqa elemento kaqpi llallichiyta munanki.

Mana atichisqa popover llamk'achiqkuna kaqpaq, qampas data-trigger="hover"munankiman chaymanta popover chaylla rikuy kutichiy hina ruwaqniykikunaman rikukun imaynachus mana suyankumanchu huk mana llamk'achisqa elemento ñit'iyta .

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

Uso

JavaScript nisqawan popovers nisqakunata atichiy:

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

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-animation="".

Métodos

$().popover(options)

Huk elemento huñunapaq popovers nisqakunata qallarichin.

.popover('show')

Huk elementopa popover nisqa kaynintam qawarichin. Llamaqman kutimun manaraq popover chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.popoverruway ruwakuchkaptin). Kayqa qhawarikun huk “manual” desencadenante de la popover nisqa. Popovers mayqinpa titulon chaymanta contenido iskaynin cero-largo kaqniyuq mana hayk'aqpas rikuchisqachu.

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

.popover('hide')

Huk elementopa popover nisqa kayninta pakan. Llamaqman kutimun manaraq popover chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.popoverruway ruwakuchkaptin). Kayqa qhawarikun huk “manual” desencadenante de la popover nisqa.

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

.popover('toggle')

Huk elementopa popover nisqatam tikran. Llamaqman kutimun manaraq popover chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.popoverutaq hidden.bs.popoverruway ruwakuchkaptin). Kayqa qhawarikun huk “manual” desencadenante de la popover nisqa.

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

.popover('dispose')

Huk elementopa popover nisqa kayninta pakaspa chinkachin. Popovers delegación llamk'achiqkuna (mayqinkuna akllana llamk'achispa kamasqaselector ) mana sapalla chinkachiyta atikunmanchu miray gatillo elementokunapi.

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

.popover('enable')

Huk elementopa popoverninman qawachinapaq atiyta qun. Popovers nisqakunaqa ñawpaqmantaraqmi atichisqa kachkan.

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

.popover('disable')

Huk elementopa popover nisqa rikuchisqa kananpaq atiyta hurqun. Popover nisqataqa musuqmanta atichisqa kaptinllam qawachiyta atinqa.

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

.popover('toggleEnabled')

Huk elementopa popover rikuchisqa utaq pakasqa kananpaq atiyninta tikran.

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

.popover('update')

Huk elementopa popover nisqap kayninta musuqchan.

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

Eventos nisqakuna

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