Popovers

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.
• 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-bs-toggleatributonkuman hina:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

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.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Qatina

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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. RTL kaqpi Bootstrap llamk'achkaspa ñankuna espejo kaqwan ruwasqa kanku.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-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-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  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, popover huk p'istumanta <div>utaq <span>, allin ruwasqa teclado-enfocable kaqwan llamk'achispa llamk'achiyta munanki tabindex="0".

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

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sass

Variables nisqakuna

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Uso

JavaScript nisqawan popovers nisqakunata atichiy:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-bs-, imaynachus data-bs-animation="". Aswan allinta qhaway akllana sutipa caso laya camelCase kaqmanta kebab-case kaqman tikrayta mayk'aq akllanakunata willay atributokuna kaqninta pasanki. Ejemplopaq data-bs-customClass="beautifier", utilizanaykimantaqa data-bs-custom-class="beautifier".

Utilizar función conpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Métodos

qawachiy

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.

myPopover.show()

pakay

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.

myPopover.hide()

toggle nisqa

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.

myPopover.toggle()

wischuy

Huk elementopa popoverninta pakan hinaspa chinkachin (DOM elementopi waqaychasqa willakuykunata hurqun). Popovers delegación llamk'achiqkuna (mayqinkuna akllana llamk'achispa kamasqaselector ) mana sapalla chinkachiyta atikunmanchu miray gatillo elementokunapi.

myPopover.dispose()

kawsarichisqa

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

myPopover.enable()

wañuchisqa

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

myPopover.disable()

toggleAtichisqa

Huk elementopa popover rikuchisqa utaq pakasqa kananpaq atiyninta tikran.

myPopover.toggleEnabled()

kunanyachiy

Huk elementopa popover nisqap kayninta musuqchan.

myPopover.update()

GetInstancia

Método estático mayqinchus huk DOM elementowan tinkisqa popover instanciata jap'iyta atikun

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Instanciata tariyUtaq Ruway

Método estático mayqinchus popover instanciata huk DOM elementowan tinkisqata jap'iyta atikun, utaq musuq ruwayta sichus mana qallarisqachu karqa

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Eventos nisqakuna

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})