Ventana emergente Bootstrap JS
Popover JS
El componente Popover es similar a la información sobre herramientas; es un cuadro emergente que aparece cuando el usuario hace clic en un elemento. La diferencia es que el popover puede contener mucho más contenido.
Para ver un tutorial sobre Popovers, lea nuestro tutorial de Bootstrap Popover .
Habilitar a través de datos-* Atributos
El data-toggle="popover"activa el popover.
El titleatributo especifica el texto del encabezado de la ventana emergente.
El data-contentatributo especifica el texto que debe mostrarse dentro del cuerpo del popover.
Ejemplo
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
A través de JavaScript
Los popovers no son complementos solo de CSS y, por lo tanto, deben inicializarse con jQuery: seleccione el elemento especificado y llame al
popover()método.
Ejemplo
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Opciones emergentes
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-placement="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when opening and closing the popover
|
|
| container | string, or the boolean false | false | Appends the popover to a specific element. Example: container: 'body' |
|
| content | string | "" | Specifies the text inside the popover's body | |
| delay | number, or object | 0 | Specifies the number of milliseconds it will take to open and close the popover. To specify a delay for opening and another one for closing, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it |
|
| html | boolean | false | Specifies whether to accept HTML tags in the popover:
When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks |
|
| placement | string | "right" | Specifies the popover position. Possible values:
|
|
| selector | string, or the boolean false | false | Adds the popover to a specified selector | |
| template | string | Base HTML to use when creating the popover. The popover's title will be injected into the .popover-header. The popover's content will be injected into the .popover-body. .arrow will become the popover's arrow. The outermost wrapper element should have the .popover class. |
||
| title | string | "" | Specifies the header text of the popover | |
| trigger | string | "click" | Specifies how the popover is triggered. Possible values:
|
|
| offset | number or a string | 0 | Offset of the popover relative to its target | |
| fallbackPlacement | string or an aray | "flip" | Specifies which position Popper wil use on fallback | |
| boundary | string or element | "scrollParent" | Overflow constraint boundary of the popover. Accepts the values "viewport", "window" or "scrollParent", or an HTML element |
Métodos emergentes
La siguiente tabla enumera todos los métodos de popover disponibles.
| Method | Description | Try it |
|---|---|---|
| .popover(options) | Activates the popover with an option. See options above for valid values | |
| .popover("show") | Shows the popover | |
| .popover("hide") | Hides the popover | |
| .popover("toggle") | Toggles the popover | |
| .popover("dispose") | Hides and destroys the popover | |
| .popover("enable") | Enables the popover the ability to be shown. This is default | |
| .popover("disable") | Removes the ability to show a popover. The popover can only be shown if it is re-enabled again | |
| .popover("toggleEnabled") | Toggles the ability for the popover to be shown or hidden | |
| .popover("update") | Updates the position of the popover |
Eventos emergentes
La siguiente tabla enumera todos los eventos emergentes disponibles.
| Event | Description | Try it |
|---|---|---|
| show.bs.popover | Occurs when the popover is about to be shown | |
| shown.bs.popover | Occurs when the popover is fully shown (after CSS transitions have completed) | |
| hide.bs.popover | Occurs when the popover is about to be hidden | |
| hidden.bs.popover | Occurs when the popover is fully hidden (after CSS transitions have completed) | |
| inserted.bs.popover | Occurs after the show.bs.popover event when the popover template has been added to the DOM |