Popovers rehegua

Tembiecharã

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

• Popovers ojepytaso biblioteca 3er partido Popper rehe oñemohenda haguã. Emoingeva’erã popper.min.js bootstrap.js mboyve térã eipuru bootstrap.bundle.min.js/ bootstrap.bundle.jsoguerekóva Popper ikatu hag̃uáicha umi popover omba’apo!
• Popovers oikotevẽ tembipuru’i ñemohendaha 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.

Techapyrã: Emboguata umi popover oparupiete

Peteĩ tape oñemboguapy hag̃ua opaite popover peteĩ página-pe haꞌeta ojeporavo hag̃ua data-bs-toggleatributo rupive:

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

Techapyrã: Oipurúvo containeropción

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.

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

Tembiecharã

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

Irundy dirección rehegua

Ojeguereko irundy opción: yvate, akatúa, yvy gotyo ha asu gotyo alineado. Umi dirección ojehechauka espejo-pe ojepuru jave Bootstrap RTL-pe.

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

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

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>

Sass rehegua

Variables rehegua

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

Jeporu rehegua

Emboguata popovers JavaScript rupive:

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

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-bs-, -peguáicha data-bs-animation="". 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. Techapyrã, eipuru rangue data-bs-customClass="beautifier", eipuru data-bs-custom-class="beautifier".

Oipurúvo función orekóvapopperConfig

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

Método-kuéra rehegua

hechauka

Oikuaauka peteî elemento popover. Ojevy ohenóivape ojehechauka mboyve añetehápe popover (heꞌiséva oiko mboyve pe shown.bs.popovermbaꞌe ojehúva). Péva ojehecha peteî “manual” desencadenante popover rehe. Umi popovers orekóva título ha contenido mokõivéva cero ipukukue araka'eve ndojehechaukái.

myPopover.show()

mongañy

Oñomi peteĩ elemento popover rehegua. Ojevy ohenóivape oñeñomi mboyve añetehápe pe popover (heꞌiséva oiko mboyve pe hidden.bs.popovermbaꞌe ojehúva). Péva ojehecha peteî “manual” desencadenante popover rehe.

myPopover.hide()

toggle rehegua

Ombohasa peteĩ elemento popover. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe pe popover (heꞌiséva oiko mboyve pe shown.bs.popovertérã hidden.bs.popovermbaꞌe ojehúva). Péva ojehecha peteî “manual” desencadenante popover rehe.

myPopover.toggle()

omboyke haguã

Oñomi ha ohundi peteĩ elemento popover (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe). Umi popovers oipurúva delegación (ojejapóva ojeporúvo opciónselector ) ndaikatúi oñehundi peteĩteĩ umi elemento disparador descendiente rehe .

myPopover.dispose()

mbopu'aka

Ome'ê peteî elemento popover-pe ikatuha ojehechauka. Popovers oñembohapéva por defecto.

myPopover.enable()

mbogue

Oipeꞌa ikatuha ojehechauka hag̃ua peteĩ elemento popover. Pe popover ikatúta ojehechauka oñembohape jeýramo añoite.

myPopover.disable()

toggleOjejapokuaa

Ombohasa mbaꞌekuaarã peteĩ elemento popover ojehechauka térã oñeñomi hag̃ua.

myPopover.toggleEnabled()

mbopyahu

Ombopyahu peteĩ elemento popover ñemohenda.

myPopover.update()

ohupytyInstancia

Método estático ohejáva ndéve rehupyty hag̃ua instancia popover ojoajúva peteĩ elemento DOM rehe

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

ohupytyTérãEjapoInstancia

Método estático ohejáva ndéve rehupyty instancia popover ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu en caso noñemoñepyrũi

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

Umi mba’e oikóva

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