in English

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 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.
  • 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.
  • Umi popovers ikatu oñemboguata gracias peteĩ elemento oĩva peteĩ DOM sombra ryepýpe.
Por defecto, ko componente oipuru desinfectante de contenido incorporado, oipeꞌavaꞌekue oimeraẽ elemento HTML ndojehejáiva explícitamente. Ehecha pe sección desinfectante ore kuatia JavaScript -pe reikuaave hag̃ua.
Pe efecto animación rehegua ko componente rehegua odepende pe prefers-reduced-motionconsulta medio rehegua rehe. Ehecha pe sección movimiento reducido ore kuatia accesibilidad rehegua .

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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-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.

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.

<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)
GPU ñembopya’e

Umi popovers sapyꞌante ojehechauka oñembotapykue umi tembipuru Windows 10-pe GPU oñembopyaꞌe rupi ha peteĩ DPI sistema rehegua oñemoambuégui. Pe mba’e’apopyrã kóvape g̃uarã v4-pe ha’e embogue GPU ñembopya’e oñeikotevẽháicha nde popovers-pe.

Oñemoñe’ẽva’ekue ñemyatyrõ:

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

Ojapóvo umi popover ombaꞌapo hag̃ua umi teclado ha tecnología pytyvõhára puruhárape g̃uarã

Ojeheja hag̃ua teclado puruhárape omombaꞌapo ne popover-kuéra, emoĩvaꞌerãnte umi elemento HTML-pe, ymaite guive oñembohapéva teclado-pe ha oñembojoajúva (haꞌeháicha enlace térã control formulario rehegua). Jepémo umi elemento HTML arbitrario ( <span>s-icha) ikatu ojejapo enfocables oñembojoapývo tabindex="0"atributo, kóva omoĩta umi parada ficha potencialmente molesto ha confuso umi elemento ndahaꞌeiva interactivo rehe umi teclado puruhárape g̃uarã, ha hetavéva tecnología oipytyvõva koꞌág̃aite nomoherakuãi popover contenido ko situación-pe . Avei, ani rejerovia hese añoite hoverpe gatillo ramo ne popover-kuérape g̃uarã, kóva ojapótagui ndaikatumo’ãigui oñembohape umi teclado puruhárape g̃uarã.

Ikatu ramo jepe emoinge HTML rico ha estructurado umi popover-pe htmlopción reheve, romomarandu mbarete ani hag̃ua remoĩ hetaiterei contenido. Mbaꞌeichaitépa ombaꞌapo umi popover koꞌág̃agua haꞌehína, ojehechauka rire, ikonteído oñembojoaju elemento disparador rehe aria-describedbyatributo reheve. Péicha resultado, opavave contenido popover oñemoherakuãta umi usuario tecnología asistida peteî corriente ipukúva, ininterrumpido.

Avei, ikatu ramo jepe avei emoinge umi control interactivo (ha’eháicha elemento forma térã enlace) nde popover-pe (emoĩvo ko’ã elemento umi whiteListatributo ha etiqueta térã ojehejávape), eikuaa ko’áĝa pe popover ndoisãmbyhýiha teclado enfoque orden. Peteĩ teclado puruhára oipeꞌa jave peteĩ popover, enfoque opyta elemento desencadenante rehe, ha jepiveguáicha pe popover ndosegíri pyaꞌete pe gatillo kuatia estructura-pe, ndaipóri garantía oñemotenondévo/oñembotapykuévoTABomomýita peteĩ teclado puruhára popover-pe voi. Mbykyhápe, oñembojoapýramo añoite umi control interactivo peteĩ popover-pe, oiméne ojapo ko’ã control ndojehupytýiva/ndojeporúiva umi teclado puruhára ha umi tecnología oipytyvõvape g̃uarã, térã por lo menos ojapo peteĩ orden de enfoque general ilógico. Ko’ã kásope, ehecha eipuru peteĩ ñe’ẽñemi modal hendaguépe.

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

Eñamindu’u seguridad rehehápe ndaikatúi oñeme’ẽ umi opción sanitize, sanitizeFnha ojeporúvo umi atributo dato rehegua.whiteList
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 '<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 '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 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 rekoha docs
CustomClase rehegua cadena rehegua | hembiapo '' .

Oñemoĩve clasekuéra pe popover-pe ojehechauka jave. Ñañamindu’u ko’ã mbo’esyry oñembojoapýta oimeraẽ mbo’esyry oje’éva plantilla-pe ári. Oñemoĩ hag̃ua heta mbo’esyry, ojesepara va’erã espacio reheve: 'a b'.

Ikatu avei embohasa peteĩ tembiaporã ombojevyvaꞌerãva peteĩ cadena añoite oguerekóva mboꞌepy réra ambuéva.

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 preventOverflow kuatiañe’ẽ .
desanizamiento rehegua booleano rehegua teete Emboguata térã embogue pe saneamiento. Ojeactiva ramo 'template', 'content'ha 'title'opciones oñesantifika va'erã. Ehecha pe sección desinfectante ore kuatiañe’ẽ JavaScript-pe .
Lista blanca rehegua mba'e Valor por defecto rehegua Objeto oguerekóva atributo ha etiqueta ojehejáva
sanitizarFn rehegua nulo rehegua | hembiapo mba'evegua Ko'ápe ikatu reabastece nde función de desinfectación nde propia. Kóva ikatu ideprovécho reiporusevéramo peteĩ biblioteca dedicada rejapo hag̃ua desinfecto.
popperConfig rehegua nulo rehegua | mba'e mba'evegua Oñemoambue hag̃ua Bootstrap Popper ñemboheko tee, ehecha Popper ñemboheko

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 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. Popovers oiporúva delegación (oñemoheñóiva oiporú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...
})