Popovers

Hatun qhawariy

Imakuna yachanapaq popover plugin kaqwan llamk'achkaspa:

• Popovers kimsa kaq biblioteca Popper kaqpi hapipakunku posición kaqpaq. Popper.min.js ñawpaqta churanayki tiyan bootstrap.js, utaq hukta llamk'achiy bootstrap.bundle.min.jsmayqinchus Popper kachkan.
• Popovers nisqaqa popover plugin nisqatam huk dependencia hina mañan.
• 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.

Ejemplos

Popovers nisqakunata atichiy

Imaynan ñawpaqpi nisqanchis hina, popovers nisqakunatan qallarichinayki manaraq utilizashaspa. Huk ñan huk p'anqapi llapa popovers qallariypaq kanman akllay data-bs-toggleatributonkuman hina, kayhina:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Demostración en vivo

JavaScript llamk'achiyku kay patamanta t'aqaman rikch'akuq kay qatiq kawsaq popover ruwanapaq. Titulokuna vía churasqa kanku data-bs-titlechaymanta cuerpo contenido vía churasqa kanku data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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 tiyan: pata, paña, uray, lluq’i ima. RTL kaqpi Bootstrap llamk'achkaspa ñankuna espejo kaqwan ruwasqa kanku. data-bs-placementMayman rinapaq kaqta tikranaykipaq churay .

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

Chullachasqacontainer

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. Kayqa kutichiq tablakunapi, yaykuna huñukunapi, chayman rikchakuqkunapipas sapa kutim.

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

Huk situacion maypi huk explícito costumbre churayta munanki containerpopovers huk modal rimanakuy ukhupi kanku , chaymanta popover kikin modal kaqman yapasqa kasqanmanta seguro kananpaq. Kayqa aswan chaniyuq popovers kaqpaq mayqinkunachus elementokuna interactivo kaqwan kanku – modal rimanakuykuna enfoqueta hap'inqa, chayrayku mana popover huk wawa elemento modal kaqmanta kaqtin, llamk'aqkuna mana kay interactivo elementokuna enfoqueta utaq activayta atinqakuchu.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Popovers personalizados

Popoverkunap rikch'ayninta CSS tikraqkunawan llamk'achiyta atinki . Huk sapanchasqa clase kaqwan churayku data-bs-custom-class="custom-popover"sapanchasqa rikchayniyku alcancepaq chaymanta wakin kiti CSS tikraqkunata llallichinapaq llamk'achiyku.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS nisqa

Variables nisqakuna

Bootstrap kaqpa wiñachkaq CSS tikraqkuna asuykuyninmanta huknin hina, popovers kunan llaqta CSS tikraqkunata llamk'achinku .popoverallinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass variables nisqakuna

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Uso

JavaScript nisqawan popovers nisqakunata atichiy:

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

Akllanakuna

Imaynachus akllanakuna willay layakuna utaq JavaScript kaqninta pasayta atikun, huk akllana sutita yapayta atikunki kayman data-bs-, imaynachus data-bs-animation="{value}". Aseguray akllana sutimanta caso laya “ camelCase ” kaqmanta “ kebab-case ” kaqman tikrayta mayk’aq akllanakunata atributos de datos kaqninta pasaspa. Ejemplopaq data-bs-custom-class="beautifier", data-bs-customClass="beautifier".

Bootstrap 5.2.0 kaqmanta, llapa componentakuna huk experimental waqaychasqa willay laya yanapakuyta yanapakunku data-bs-configmayqinchus JSON watiqa hina sanu componente ruwayta wasichayta atin. Huk elemento data-bs-config='{"delay":0, "title":123}'chaymanta data-bs-title="456"layakunayuq kaqtin, qhipa titlechanin kanqa 456chaymanta sapaq willay layakuna qusqa chanikunata llallichinqa data-bs-config. Chaymanta, kunan kaq willay layakuna JSON chanikunata wasichayta atinku kayhina data-bs-delay='{"show":0,"hide":150}'.

Utilizar función conpopperConfig

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

Métodos

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Eventos nisqakuna

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