Source

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

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

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.

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

Oñeikotevẽ marcado específico oñemboyke-pe g̃uarã ambue clic-pe

Ojepokuaa porã hag̃ua kundahára ha plataforma kurusu, eipuruva’erã <a>etiqueta, ndaha’éi etiqueta <button>, ha avei emoĩva’erã peteĩ tabindexatributo.

Popover ojedesestimava’erã 
<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)

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

Téra Hesegua Upevakuére Techaukaha
animación rehegua booleano rehegua teete Emoĩ peteĩ CSS descoloramiento ñembohasa popover-pe
mba’yru rehegua cadena rehegua | elemento | japu japu

Ombojoaju pe popover peteĩ elemento específico rehe. Tembiecharã: container: 'body'. Ko opción ideprovéchoiterei ohejágui ndéve emohenda pe popover kuatia osyryhápe elemento desencadenante ypýpe - ojokótava pe popover ani hag̃ua oveve mombyry elemento desencadenante-gui peteĩ ventána tuichakue ñemoambue aja.
pypegua cadena rehegua | elemento | hembiapo '' .

Contenido valor por defecto data-contentatributo noĩriramo.

Oñemeꞌeramo peteĩ función, oñehenóita thisirreferencia reheve pe elemento oñembojoajúva popover rehe.
mbegue papapy | mba'e 0 rehegua

Retraso ohechauka ha omokañy popover (ms) - ndojeporúi tipo de gatillo manual-pe

Oñeme’ẽramo peteĩ papapy, ojejapo retardo mokõivévape kañy/jehechauka

Objeto estructura ha’e: .delay: { "show": 500, "hide": 100 }
html rehegua booleano rehegua japu Emoinge HTML pe popover-pe. Japúramo, jQuery rembiaporã textojeporúta oñemoinge hag̃ua mbaꞌekuaarã DOM-pe. Eipuru jehaipyre rejepy’apýramo umi ataque XSS rehe.
colocación rehegua cadena rehegua | hembiapo 'akatúa'

Mba'éichapa oñemohenda pe popover - auto | yvate | yvy gotyo | izquierda | akatúa.
Oje’e jave auto, oorienta jeýta dinámicamente pe popover.

Ojepuru jave peteĩ tembiaporã ojekuaa hag̃ua ñemohenda, oñehenói nodo popover DOM reheve peteĩha argumento ramo ha elemento disparador nodo DOM mokõiha ramo. Pe thiscontexto oñemohenda instancia popover-pe.
selector rehegua cadena rehegua | japu japu Oñeme’ẽramo peteĩ jeporavoha, umi mba’e’oka popover rehegua oñeme’ẽta umi mba’e’oka oje’évape. En práctica, kóva ojepuru ikatu hag̃uáicha contenido HTML dinámico oguereko popovers oñembojoapýva. Ehecha kóva ha peteĩ techapyrã informativo .
plantilla rehegua sã '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML ojepuru hag̃ua ojejapo jave popover.

Umi popover's titleoñeinyecta va'erã pe .popover-header.

Umi popover's contentoñeinyecta va'erã pe .popover-body.

.arrowoikóta chugui pe popover flecha.

Pe elemento envoltura okápegua oguerekova era pe .popoverclase.
myakãha cadena rehegua | elemento | hembiapo '' .

Título valor por defecto titleatributo ndaipóriramo.

Oñemeꞌeramo peteĩ función, oñehenóita thisirreferencia reheve pe elemento oñembojoajúva popover rehe.
ñembokapu sã 'emboguejy'. Mba'éichapa oñemboguata popover - eity | hover rehegua | enfoque | popeguáva. Ikatu rembohasa heta disparador; omboja’o chupekuéra peteĩ espacio reheve. manualndaikatúi oñembojoaju ambue gatillo ndive.
desplazamiento rehegua papapy | sã 0 rehegua Compensación del popover relativo orekóva meta rehe. Ojeikuaave hag̃ua ehecha Popper.js offset docs .
fallbackOñemohenda cadena rehegua | matriz rehegua 'jere' Eheja emombe’u mba’e tendapa oipurúta Popper fallback-pe. Ojeikuaave hag̃ua ehecha Popper.js rekoha kuatiañe’ẽ
límite rehegua cadena rehegua | mba'e rehegua 'desplazamientoTúva'. Desbordamiento restricción límite del popover rehegua. Omoneĩ umi mbaꞌekuaarã 'viewport', 'window', 'scrollParent', térã peteĩ HTMLElement ñembohekopyrã (JavaScript añoite). Ojeikuaave hag̃ua ehecha Popper.js kuatiahaipyre preventOverflow .

Umi atributo de datos umi popover individual-pe g̃uarã

Umi opción umi popover individual-pe g̃uarã ikatu alternativamente ojehechauka ojeporúvo umi atributo de datos, oñemyesakã haguéicha yvateve.

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua.

$().popover(options)

Omoñepyrũ umi popover 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 oguerekóva título ha contenido mokõive ipukukue cero 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

Tipo de Evento rehegua Techaukaha
ohechauka.bs.popover rehegua Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua.
ojehechauka.bs.mboriahu Ko mba’e ojehúva oñembogue ojejapo rire ojehecha hag̃ua puruhárape (oha’arõta oñembotývo umi CSS jehasaha).
omokañy.bs.mboriahu Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo instancia rehegua.
kañymby.bs.mboriahu Ko mba’e’oka oñembogue pe popover oñemokañypa rire puruháragui (oha’arõta CSS jehaipyre oñembotývo).
omoinge.bs.mboriahu Ko mbaꞌe ojehúva oñemboyke pe show.bs.popovermbaꞌe ojehúva rire oñembojoapývo popover plantilla DOM-pe. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})