Bootstrap Plugin de Popover
El popover es similar al tooltip y proporciona una vista ampliada. Para activar el popover, el usuario solo necesita pasar el cursor sobre el elemento. El contenido del popover se puede completar completamente con la API de datos de Bootstrap (Bootstrap Data API). Este método depende del tooltip.
Si desea hacer referencia a las funciones de este plugin por separado, necesitará hacer referencia apopover.js, que depende deel plugin de Tooltip. O, como se menciona enDescripción general de los plugins de Bootstrap, en el capítulo, puede hacer referencia abootstrap.jso la versión comprimida debootstrap.min.js。
Uso
El plugin de Popover genera contenido y marcado según sea necesario. De forma predeterminada, coloca el popover detrás de su elemento disparador. Puede agregar el popover de las siguientes dos maneras:
- Mediante el atributo data: Para agregar un popover, solo agregue `data-toggle="popover"` a una etiqueta de ancla/botóndata-toggle="popover", y listo. El título del ancla es el texto del popover. De forma predeterminada, el plugin coloca el popover en la parte superior.
<a href="../index.html" data-toggle="popover" title="Example popover"> 请悬停在我的上面 </a>
- Mediante JavaScript:Habilite el popover mediante JavaScript:
$('#identifier').popover(options)
El plugin Popover no es un plugin de CSS puro, como los menús desplegables y otros plugins discutidos anteriormente. Para usar este plugin, debe activarlo con jQuery (lea javascript). Use el siguiente script para habilitar todos los popovers de la página:
$(function () { $("[data-toggle='popover']").popover(); });
Ejemplo
El siguiente ejemplo demuestra el uso del plugin Popover mediante el atributo data.
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
Opciones
Hay algunas opciones que se agregan mediante la API de datos de Bootstrap (Bootstrap Data API) o se invocan mediante JavaScript. La siguiente tabla enumera estas opciones:
| Nombre de la opción | Tipo/Valor predeterminado | Nombre del atributo Data | Descripción |
|---|---|---|---|
| animation | boolean Valor predeterminado: true | data-animation | Aplica un efecto de transición de desvanecimiento CSS al popover. |
| html | boolean Valor predeterminado: false | data-html | Inserta HTML en el popover. Si es false, se utilizará el método text de jQuery para insertar contenido en el DOM. Si le preocupan los ataques XSS, use text. |
| placement | string|function Valor predeterminado: top | data-placement | Especifica cómo posicionar el popover (es decir, top|bottom|left|right|auto). Cuando se especifica comoauto, el popover se ajusta dinámicamente. Por ejemplo, si placement es "auto left", el popover se mostrará lo más a la izquierda posible, y solo se mostrará a la derecha cuando las condiciones no lo permitan. |
| selector | string Valor predeterminado: false | data-selector | Si se proporciona un selector, el objeto popover será delegado al objetivo especificado. |
| title | string | function Valor predeterminado: '' | data-title | Si no se especificatitleel atributo, la opción title es el valor de title predeterminado. |
| trigger | string Valor predeterminado: 'hover focus' | data-trigger | Define cómo se activa el popover: click| hover | focus | manual. Puede pasar múltiples disparadores, separados por espacios. |
| delay | number | object Valor predeterminado: 0 | data-delay | Número de milisegundos para retrasar la visualización y ocultación del popover; no se aplica al tipo de activación manual. Si se proporciona un número, el retraso se aplicará a la visualización y ocultación. Si se proporciona un objeto, la estructura es la siguiente:
delay:
{ show: 500, hide: 100 } |
| container | string | false Valor predeterminado: false | data-container | Agrega el popover al elemento especificado. Ejemplo: container: 'body' |
Métodos
A continuación se presentan algunos métodos útiles del plugin Popover:
| Método | Descripción | Ejemplo |
|---|---|---|
| Options: .popover(options) | Adjunta el controlador del popover a una colección de elementos. |
$().popover(options) |
| Toggle: .popover('toggle') | Alterna la visualización/ocultación del popover de un elemento. |
$('#element').popover('toggle')
|
| Show: .popover('show') | Muestra el popover de un elemento. |
$('#element').popover('show')
|
| Hide: .popover('hide') | Oculta el popover de un elemento. |
$('#element').popover('hide')
|
| Destroy: .popover('destroy') | Oculta y destruye el popover de un elemento. |
$('#element').popover('destroy')
|
Ejemplo
El siguiente ejemplo demuestra los métodos del plugin Popover:
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
Eventos
La siguiente tabla enumera los eventos utilizados en el plugin Popover. Estos eventos se pueden usar como ganchos (hooks) en funciones.
| Evento | Descripción | Ejemplo |
|---|---|---|
| show.bs.popover | Este evento se activa inmediatamente cuando se llama al método de instancia show. |
$('#mypopover').on('show.bs.popover', function () {
// 执行一些动作...
})
|
| shown.bs.popover | Este evento se activa cuando el popover es visible para el usuario (esperará a que se complete la transición CSS). |
$('#mypopover').on('shown.bs.popover', function () {
// 执行一些动作...
})
|
| hide.bs.popover | Este evento se activa inmediatamente cuando se llama al método de instancia hide. |
$('#mypopover').on('hide.bs.popover', function () {
// 执行一些动作...
})
|
| hidden.bs.popover | Este evento se activa cuando el popover está oculto para el usuario (esperará a que se complete la transición CSS). |
$('#mypopover').on('hidden.bs.popover', function () {
// 执行一些动作...
})
|
Ejemplo
El siguiente ejemplo demuestra los eventos del plugin Popover:
Ejemplo
Pruébalo »
El resultado se muestra a continuación:
