English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de Bootstrap

Plugin de Bootstrap

Plugin de cuadro emergente (Popover) de Bootstrap

El plugin de cuadro emergente (Popover) de Bootstrap proporciona una vista extendida similar a la sugerencia (Tooltip). Para activar el cuadro emergente, el usuario solo necesita posar el mouse sobre el elemento. El contenido del cuadro emergente se puede llenar completamente utilizando el API de datos de Bootstrap (Bootstrap Data API). Este método depende de la sugerencia (tooltip).

Si desea citar funcionalidades del plugin de manera independiente, debe citar popover.js، depende de el plugin de sugerencia (Tooltip)。O, como Vista general de los plugins de Bootstrap como se mencionó en el capítulo bootstrap.js o la versión comprimida de bootstrap.min.js.

Uso

El plugin de cuadro emergente (Popover) genera contenido y etiquetas según las necesidades, por defecto coloca el cuadro emergente (popover) detrás de los elementos desencadenantes. Puede agregar el cuadro emergente (popover) de las siguientes dos formas:

  • a través de la propiedad de datos：Para agregar un Popover(popover), simplemente añada un ancla/Añadir etiqueta de botón data-toggle="popover" Es suficiente. El título del ancla es el texto del Popover(popover). Por defecto, el plugin coloca el Popover(popover) en la parte superior.

    <a　href="#"　data-toggle="popover"　title="Ejemplo de Popover"
　　　　Póngase en contacto conmigo
</a>

  • A través de JavaScript:Habilitar Popover(popover) mediante JavaScript:

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

El plugin de Popover(Popover) no es un plugin puramente CSS como se discutió anteriormente en menús desplegables y otros plugins. Para usar este plugin, debe activarlo con jquery (leer javascript). Utilice el siguiente script para habilitar todos los popovers(popover) en la página:

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

Ejemplo en línea

El siguiente ejemplo muestra el uso del plugin de Popover(Popover) a través de la propiedad de datos.

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Plugin de Popover(Popover) </title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div  class="container"  style="padding:　100px　50px　10px;">
	<button type="button" class="btn btn-default"　title="Título del Popover"　　
			data-container="body"  data-toggle="popover"  data-placement="left"　
			data-content="Algunos de los contenidos del Popover a la izquierda">
		la Popover a la izquierda
	</button>
	<button type="button" class="btn btn-primary"　title="Título del Popover"　　
			data-container="body"  data-toggle="popover"  data-placement="top"　
			data-content="Algunos de los contenidos del Popover en la parte superior">
		Popover en la parte superior
	</button>
	<button type="button" class="btn btn-success"　title="Título del Popover"　　
			data-container="body"  data-toggle="popover"  data-placement="bottom"　
			data-content="Algunos de los contenidos del Popover en la parte inferior">
		Popover en la parte inferior
	</button>
	<button type="button" class="btn btn-warning"　title="Título del Popover"　　
			data-container="body"  data-toggle="popover"  data-placement="right"　
			data-content="Algunos de los contenidos del Popover a la derecha">
		Popover a la derecha
	</button>
</div>
<script>
$(function　()　{　
	$("[data-$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Opciones

Algunas opciones se agregan a través de la API de datos de Bootstrap (Bootstrap Data API) o se llaman mediante JavaScript. La siguiente tabla enumera estas opciones:

Nombre de la opciónTipo/Valor predeterminadoNombre de la propiedad de datosdescripción
animationboolean
Valor predeterminado: true		data-animationAplicar un efecto de transición de desvanecimiento de CSS a la ventana emergente.
htmlboolean
Valor predeterminado: false		data-htmlInsertar HTML en el cuadro emergente. Si es false, se utilizará el método text de jQuery para insertar contenido en el DOM. Si está preocupado por los ataques XSS, utilice text.
placementstring|function
Valor predeterminado: top		data-placementEspecificar cómo posicionar el cuadro emergente (es decir, top|bottom|left|right|auto).
Cuando se especifica auto En este caso, ajusta dinámicamente el cuadro emergente. Por ejemplo, si placement es "auto left", el cuadro emergente se mostrará en la izquierda siempre que sea posible, y en caso de que no sea posible, se mostrará en la derecha.
selectorstring
Valor predeterminado: false		data-selectorSi se proporciona un selector, el objeto del cuadro emergente se delega al objetivo especificado.
titlestring | function
Valor predeterminado: ''		data-titleSi no se especifica title Si no se especifica el valor de la propiedad, el valor predeterminado de title es el valor por defecto.
triggerstring
Valor predeterminado: 'hover focus'		data-triggerDefinir cómo desencadenar el cuadro emergente: click| hover | focus | manual. Puede pasar varios desencadenadores, separados por espacio.
delaynumber | object
Valor predeterminado: 0		data-delayMilisegundos de demora para mostrar y ocultar el cuadro emergente. - No se aplica a la trigger tipo manual. Si se proporciona un número, la demora se aplicará a la visualización y ocultación. Si se proporciona un objeto, la estructura es como se muestra a continuación:
delay:
{　mostrar:　500,　ocultar:　100　}
containerstring | false
Valor predeterminado: false		data-containerAñadir un cuadro emergente al elemento especificado.
Ejemplo: container: 'body'

Métodos

A continuación, se presentan algunos métodos útiles en el plugin de cuadros emergentes (Popover):

MétodosdescripciónEjemplo
Opciones: .popover(options)Adjuntar gestores de cuadros emergentes a la colección de elementos.
$().popover(options)
Cambiar: .popover('toggle')Cambiar a mostrar/Ocultar el cuadro emergente del elemento.
$('#element').popover('toggle')
Mostrar: .popover('show')Mostrar el cuadro emergente del elemento.
$('#element').popover('show')
Ocultar: .popover('hide')Ocultar el cuadro emergente del elemento.
$('#element').popover('hide')
Destroy: .popover('destroy')Oculta y destruye el Popover del elemento.
$('#element').popover('destroy')

Ejemplo en línea

El siguiente ejemplo muestra los métodos del plugin Popover(Popover):

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Métodos del plugin Popover(Popover)/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div  class="container"  style="padding:　100px　50px　10px;">
	<button type="button" class="btn btn-popover predeterminado-show"　
			title="Título de Popover" data-container="body"　
			data-toggle="popover"  data-placement="left"　
			data-content="algunos contenidos de la Popover a la izquierda — método show">
		la Popover a la izquierda
	</button>
	<button type="button" class="btn btn-popover primario-hide"　
			title="Título de Popover" data-container="body"　
			data-toggle="popover"  data-placement="top"　
			data-content="Contenido del Popover en la parte superior - método hide">
		Popover en la parte superior
	</button>
	<button type="button" class="btn btn-popover de éxito-destroy"　
			title="Título de Popover" data-container="body"　
			data-toggle="popover"  data-placement="bottom"　
			data-content="Contenido del Popover en la parte inferior - método destroy">
		Popover en la parte inferior
	</button>
	<button type="button" class="btn btn-popover de advertencia-toggle"　
			title="Título de Popover" data-container="body"　
			data-toggle="popover"  data-placement="right"　
			data-content="Contenido del Popover a la derecha - método toggle">
		Popover a la derecha
	</button"><br><br><br><br><br><br>
	<p  class="popover-options">
		<a  href="#"  type="button"  class="btn  btn-warning"  title="<h2>Título</h2>"　　
		　　　data-container="body"  data-toggle="popover"  data-content="
																	　<h4>Contenido de Popover  -  método options</h4>">
			Popover
		</a>
	</p>
	<script>
		$(function () { $('.popover-show').popover('show');});
		$(function () { $('.popover-hide').popover('hide');});
		$(function () { $('.popover-destroy').popover('destroy');});
		$(function () { $('.popover-toggle').popover('toggle');});
		$(function  ()  {  $(".popover-options  a").popover({html  :  true  });});
	</script>
</div>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

evento

La siguiente tabla enumera los eventos que se utilizan en el plugin de Popover. Estos eventos pueden ser utilizados como ganchos en las funciones.

eventodescripciónEjemplo
show.bs.popoverEste evento se desencadena inmediatamente cuando se llama al método show.
$('#mypopover').on('show.bs.popover', function () {
　　//　Ejecutar algunas acciones...
)
shown.bs.popoverEste evento se desencadena cuando la Popover se hace visible para el usuario (esperando la finalización del efecto de transición CSS).
$('#mypopover').on('shown.bs.popover', function () {
　　//　Ejecutar algunas acciones...
)
hide.bs.popoverEste evento se desencadena inmediatamente cuando se llama al método hide.
$('#mypopover').on('hide.bs.popover', function () {
　　//　Ejecutar algunas acciones...
)
hidden.bs.popoverEste evento se desencadena cuando el tooltip se oculta para el usuario (esperando la finalización del efecto de transición CSS).
$('#mypopover').on('hidden.bs.popover', function () {
　　//　Ejecutar algunas acciones...
)

Ejemplo en línea

El siguiente ejemplo muestra los eventos del plugin Popover (Popover):

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Eventos del plugin Popover (Popover)/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div clas="container" style="padding:　100px　50px　10px;">
	<button type="button" class="btn btn-popover primario-show"　
			title="Título de Popover" data-container="body"　
			data-toggle="popover"　
			data-content="algunos contenidos de la Popover a la izquierda — método show">
		la Popover a la izquierda
	</button>
</div>
<script>
	$(function () { $('.popover-show').popover('show');});
	$(function () { $('.popover-show').on('shown.bs.popover', function () {
		alert("Mensaje de advertencia cuando se muestra");
	})});
</script>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Cuadro de advertencia de BootstrapComplemento de herramienta de sugerencias de Bootstrap