Popovers rehegua

Tembiecharã

Mba’e ojekuaava’erã ojepuru jave popover plugin:

• Popovers ojepytaso biblioteca tercero Popper rehe posicionamiento rehe. Emoĩva’erã popper.min.js mboyve bootstrap.js, térã eipuru peteĩ bootstrap.bundle.min.jsoguerekóva Popper.
• Popovers oikotevẽ popover plugin peteĩ dependencia ramo.
• Popovers ha’e opt-in por razones de rendimiento, upévare nde voi remoñepyrũva’erã .
• Cero-longitud titleha contentvalores araka'eve ndohechaukái peteî popover.
• Emombeꞌu container: 'body'ani hag̃ua ojejapo apañuãi renderización rehegua umi componente ikomplikadovévape (ñande aty jeikerãicha, aty botón rehegua, ha mbaꞌe).
• Omotenondévo popovers umi elemento kañymby rehe ndoikomo'ãi.
• Umi popovers .disabledtérã disabledelemento-kuérape g̃uarã oñemboguapyvaꞌerã peteĩ elemento envoltura rehe.
• Ojedispara jave umi ancla-gui ojejaho’íva heta línea ári, umi popover oñecentráta umi ancla ancho total mbytépe. Eipuru .text-nowrapnde <a>s ári ani hagua oiko ko jepokuaa.
• Umi popovers oñeñomiva'erã ojeipe'a mboyve DOM-gui umi elemento correspondiente orekóva.
• Umi popovers ikatu oñemboguata gracias peteĩ elemento oĩva peteĩ DOM sombra ryepýpe.

Emoñe’ẽ meme rehecha haĝua mba’éichapa omba’apo umi popover algunos ejemplos reheve.

Tembiecharã

Ombohapéva umi popovers

Ja’e haguéicha yvateve, remoñepyrũva’erã umi popover ikatu mboyve ojeporu. Peteĩ tape oñemboguapy hag̃ua opaite popover peteĩ página-pe haꞌeta ojeporavo hag̃ua data-bs-toggleatributo rupive, péicha:

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

Demostración en vivo rehegua

Roipuru JavaScript ojoguáva pe fragmento yvateguápe rohechauka hag̃ua ko’ã popover oikovéva. Umi título oñemohenda vía data-bs-titleha contenido corporal oñemohenda vía 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>

Irundy dirección rehegua

Ojeguereko irundy opción: yvate, akatúa, yvy gotyo ha asu gotyo. Umi dirección ojehechauka espejo-pe ojepuru jave Bootstrap RTL-pe. Oñemohenda data-bs-placementoñemoambue hag̃ua dirección.

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

Jepokuaacontainer

Eguerekóramo peteĩ estilo peteĩ elemento túva rehe ojokóva peteĩ popover rehe, emombeꞌuse peteĩ jeporupyre containerikatu hag̃uáicha popover HTML ojekuaa upe elemento ryepýpe hendaguépe. Kóva ojehecha jepi umi cuadro ombohováivape, umi grupo de entrada ha umíchagua.

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

Ambue situación emohendasétahápe peteĩ jepokuaa hesakãva containerhaꞌehína umi popover peteĩ ñeꞌeryru modal ryepýpe , ojeasegura hag̃ua pe popover voi oñembojoapyha pe modal rehe. Kóva tuicha mba’e umi popover-pe g̃uarã oguerekóva elemento interactivo – umi diálogo modal oñapytĩta ñuhãme enfoque, upévare ndaha’éiramo pe popover ha’éva peteĩ elemento mitã modal rehegua, umi puruhára ndaikatumo’ãi oenfoka térã omomba’apo ko’ã elemento interactivo.

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

Popovers personalizado rehegua

Ikatu emohenda umi popover jehechauka eipurúvo CSS mbaꞌekuaarã . Romohenda peteĩ mbo’esyry jeporupyre ndive data-bs-custom-class="custom-popover"ro’alcance hag̃ua ore jehechauka jeporupyre ha roipuru romboyke hag̃ua peteĩva umi CSS mba’ekuaarã tendápegua.

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

Oñemboyke ambue clic-pe

Eipuru focusgatillo emosẽ hag̃ua popovers puruhára clic oúvape peteĩ elemento iñambuéva elemento toggle-gui.

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

Umi elemento oñemboykéva

Umi elemento oguerekóva disabledatributo ndaha’éi interactivo, he’iséva umi puruhára ndaikatuiha ojepyso térã ojepyso hesekuéra omoñepyrũ hag̃ua peteĩ popover (térã tembipuru’i ñe’ẽmondo). Peteĩ tembiaporãicha, emoñepyrũse pe popover peteĩ envoltura-gui <div>térã <span>, iporãvéva ojejapo teclado-pe oñembohapéva ojeporúvo tabindex="0".

Umi popover desencadenante oñemboykévape g̃uarã, ikatu avei reipotave ikatu hag̃uáicha pe popover ojehechauka pya’e jehechapyrãicha ne puruhárapedata-bs-trigger="hover focus" ikatuháicha noha’arõi hikuái oity peteĩ elemento oñemboykéva rehe.

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

Variables rehegua

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã oñembohapévape, umi popover koꞌág̃a oipuru CSS mbaꞌekuaarã local on .popoveroñembotuichave hag̃ua personalización tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$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 mba’ekuaarã

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

Jeporu rehegua

Emboguata popovers JavaScript rupive:

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

Opciones rehegua

Umi opción ikatuháicha oñembohasa atributo de datos térã JavaScript rupive, ikatu emoĩ peteĩ opción réra data-bs-, -peguáicha data-bs-animation="{value}". Ejesareko emoambue hag̃ua káso tipo opción réra “ camelCase ”-gui “ kebab-case ”-pe embohasávo umi opción atributo de datos rupive. Por ehémplo, eipuru data-bs-custom-class="beautifier"rangue data-bs-customClass="beautifier".

Bootstrap 5.2.0 guive, opaite componente oipytyvõ peteĩ atributo dato reservado experimentaldata-bs-config ikatúva oñemohenda componente configuración simple peteĩ cadena JSON ramo. Peteĩ elemento oguerekóramo data-bs-config='{"delay":0, "title":123}'ha data-bs-title="456"atributo, pe valor paha titlehaꞌeta 456ha umi atributo dato rehegua añónte omboykéta umi valor oñemeꞌevaꞌekue data-bs-config. Avei, umi atributo dato rehegua oĩmava ikatu oguereko JSON mbaꞌekuaarã data-bs-delay='{"show":0,"hide":150}'.

Oipurúvo función orekóvapopperConfig

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

Método-kuéra rehegua

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

Umi mba’e oikóva

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