Source

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.js kaqpi hapipakunku churanapaq. Popper.min.js manaraq bootstrap.js kaqmanta churanayki tiyan utaq bootstrap.bundle.min.js/ llamk'achiy bootstrap.bundle.jsmayqinchus Popper.js 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.

Ñ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="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>

Qatiqnin ñit’iypiqa qarquy

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

Específica marcado necesario para dismiss-en-siguiente-click

Allin chakana maskaq chaymanta chakana plataforma ruwaypaq, <a>etiquetata llamk'achinayki tiyan, mana etiquetatachu , chaymanta huk atributotapas <button>churanayki tiyan .tabindex

Desestimable popover nisqa 
<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)

Akllanakuna

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

Suti Niraq Ñawpaqchasqa Willay
animación boolean nisqa chiqaq Huk CSS ch'usaqyachiy tikrayta popover kaqman churay
contenedor q'aytu | elemento | pantasqa pantasqa

Popover nisqataqa huk elemento específico nisqamanmi yapan. Ejemplo: container: 'body'. Kay akllana aswan allin kan kaypi chaymanta popoverta qillqap puriyninpi elemento desencadenante qayllapi churayta atikun - mayqinchus harkanqa popoverta elemento desencadenantemanta karuman wayt'ayta huk ventana hatun kayninta tikray pachapi.
winay q'aytu | elemento | ruway '' .

Ñawpaqmanta churasqa imayna kanankuna sichus data-contentlaya mana kanchu.

Sichus huk ruwana qusqa, chayta waqyasqa kanqa thisreferencia churasqawan chay elementoman mayqinmanchus popover k'askasqa kachkan.
unayay yupay | ima 0.

Popover (ms) rikuchiy chaymanta pakay tardakuy - mana makiwan gatillo layapaqchu ruwakun

Sichus huk yupay qusqa, tardiy iskaynin pakay/rikuchiypi churasqa

Imakunap rurasqanqa kaymi:delay: { "show": 500, "hide": 100 }
html nisqapi boolean nisqa pantasqa Popover nisqaman HTML nisqa churay. Sichus llulla, jQuery kaqpa textruwaynin llamk'achisqa kanqa DOM kaqman willayta churanapaq. Qillqata llamk'achiy sichus XSS ataquekunamanta llakisqa kanki.
churay q'aytu | ruway 'paña'

Imaynatataq popover - auto | patamanta | urayninpi | lluq'i | paña.
Mayk'aqchus autonisqa kachkan, chay popover nisqataqa dinamicamente musuqmanta pusanqa.

Huk ruwana churayta tarinapaq llamk'achisqa kaqtinqa, popover DOM nodowan ñawpaq argumenton hina chaymanta elemento trigger DOM nodo iskay kaq hina waqyasqa. Contextoqa thispopover instanciamanmi churasqa kachkan.
akllaq q'aytu | pantasqa pantasqa Sichus huk akllana qusqa, popover objetokuna nisqa metakunaman delegasqa kanqa. Ruwaypi, kayqa llamk'achisqa HTML llamk'achiq contenido popovers yapasqa kananpaq atichinanpaq. Kayta hinaspa huk willakuypaq ejemplota qaway .
plantilla qaytu '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML llamk'achinapaq popover ruwachkaspa.

Chay popover's titlenisqataqa inyectasqa kanqa chay .popover-header.

Chay popover's contentnisqataqa inyectasqa kanqa chay .popover-body.

.arrowpopoverpa flechanman tukunqa.

Aswan hawa p'istu elementoqa .popoverclaseyuqmi kanan.
suti q'aytu | elemento | ruway '' .

Ñawpaqmanta churasqa titulu chani sichus titlelaya mana kanchu.

Sichus huk ruwana qusqa, chayta waqyasqa kanqa thisreferencia churasqawan chay elementoman mayqinmanchus popover k'askasqa kachkan.
piñachiy qaytu 'click' nisqa. Imayna popover qallarikun - ñit'iy | hover | enfoque | makiwan. Achka gatillokunatam pasawaq; chaykunata huk ch’usaqwan t’aqay. manualmana huk gatillowan kuskanchasqachu kanman.
offset nisqa yupay | qaytu 0. Compensación del popover relativo a su meta. Aswan willakuypaq qhaway Popper.js kaqpa offset docs .
fallbackClocación q'aytu | matriz 'kuyuchiy' Permitir especificar cual posición Popper utilizará en fallback. Aswan willakuypaq Popper.js kaqpa ruwaynin qillqakunata qhaway
frontera q'aytu | imakuna 'scrollParent' nisqa. Límite de restricción de desbordamiento del popover nisqa. 'viewport', 'window', 'scrollParent', icha HTMLElement willaypa chanikunata chaskikun (JavaScriptlla). Aswan willakuypaq qhaway Popper.js kaqpa preventOverflow qillqakuna .

Sapa popovers nisqapaq atributos de datos nisqa

Sapa popovers kaqpaq akllanakuna hukniraymanta willayta atributokuna llamk'achiyninwan riqsichikunman, ñawpaqpi sut'inchasqa hina.

Métodos

Métodos y transiciones asíncronas

Llapan API ruwanakuna mana sink'uyuq kanku chaymanta huk tikrayta qallarinku . Paykunaqa kutinku waqyaqman chaylla transición qallarisqa ichaqa manaraq tukukuchkaptin . Chaymantapas, huk tikray componente kaqpi huk método waqyay mana qhawasqachu kanqa .

Aswan willakuypaq JavaScript qillqaykuta qhaway.

$().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 mayqinkunachus iskaynin titulonku chaymanta contenidonku cero-largoyuq kanku 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

Tipo de Evento Willay
rikuchiy.bs.popover Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa.
rikuchisqa.bs.popover Kay ruwayqa llamk'achisqa kachkan mayk'aq popover ruwaqman rikukuq ruwasqa (suyanqa CSS tikraykuna tukukunanta).
pakay.bs.popover Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq hideinstancia método waqyasqa kachkan.
pakasqa.bs.wakcha Kay ruwayqa llamk'achisqa kachkan mayk'aq popover llamk'aqmanta pakasqa kayta tukusqa (suyanqa CSS tikraykuna tukukunanta).
churasqa.bs.wakcha Kay ruwayqa ruwaymanta qhipaman llamk'achisqa kachkan show.bs.popovermayk'aq popover plantilla DOM kaqman yapasqa kachkan. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})