Popovers rehegua

Kuatiahaipyre ha techapyrã emoĩ hag̃ua Bootstrap popovers, ojejuhúvaicha iOS-pe, oimeraẽ elemento nde tenda’ípe.

Tembiecharã

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

• Popovers ojerovia biblioteca 3er partido Popper.js rehe oñemohenda hag̃ua. Emoingeva’erã popper.min.js bootstrap.js mboyve térã eipuru bootstrap.bundle.min.js/ bootstrap.bundle.jsoguerekóva Popper.js ikatu hag̃uáicha umi popover omba’apo!
• Popovers oikotevẽ tembipuru’i ñemohendaha peteĩ dependencia ramo.
• Emopu’ãramo ore JavaScript ypykue guive, oikotevẽutil.js .
• 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 ombojere heta línea rupi, 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-toggleatributo rupive:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Techapyrã: Oipurúvo containeropción

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

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Tembiecharã

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

Irundy dirección rehegua

Ojeguereko irundy opción: yvate, akatúa, yvy gotyo ha asu gotyo alineado.

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

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

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>ha embogue pe pointer-eventselemento oñemboykéva ári.

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-trigger="hover" ikatuháicha noha’arõi hikuái oity peteĩ elemento oñemboykéva rehe.

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

Jeporu rehegua

Emboguata popovers JavaScript rupive:

$('#example').popover(options)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

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-, -peguáicha data-animation="".

Método-kuéra rehegua

$().popover(options)

Omoñepyrũ umi popovers peteĩ elemento ñembyatyrã.

.popover('show')

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.

$('#element').popover('show')

.popover('hide')

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.

$('#element').popover('hide')

.popover('toggle')

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.

$('#element').popover('toggle')

.popover('dispose')

Oñomi ha ohundi peteî elemento popover. Umi popovers oipurúva delegación (ojejapóva ojeporúvo opciónselector ) ndaikatúi oñehundi peteĩteĩ umi elemento disparador descendiente rehe .

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

Ombopyahu peteĩ elemento popover ñemohenda.

$('#element').popover('update')

Umi mba’e oikóva

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})