Los últimos tutoriales de desarrollo web
 

Bootstrap JS Popover

❮ Anterior Siguiente Referencia ❯

JS Popover (popover.js)

El Popover plugin es similar a la información de herramientas; se trata de 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.

Dependencia plugin: Popovers requieren el plugin información sobre herramientas (tooltip.js) que se incluirán en su versión de Bootstrap .

Para ver un tutorial sobre Popovers , lea nuestra Bootstrap Popover Tutorial .

Via data-* Atributos

La data-toggle="popover" activa el popover .

El title atributo especifica el texto del encabezado de la popover .

El data-content atributo especifica el texto que se debe mostrar el interior de la popover's cuerpo.

Ejemplo

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Inténtalo tú mismo "

a través de JavaScript

Popovers no son plugins CSS-solamente, y por lo tanto deben ser inicializadas con jQuery: seleccionar el elemento especificado y llamar a la popover() método.

Ejemplo

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
Inténtalo tú mismo "

Popover Opciones

Las opciones pueden ser transmitidos a través de los atributos de datos o JavaScript. Para los atributos, al añadir el nombre de opción de data- , como en la data-placement="" .

Nombre Tipo Defecto Descripción Intentalo
animationbooleantrue

Especifica si se debe añadir un efecto de transición CSS se desvanecen al abrir y cerrar la popover

  • verdad - Añadir un efecto de desvanecimiento
  • falso - No añadir un efecto de desvanecimiento
Intentalo
containerstring, or the boolean falsefalse Añade la popover a un elemento específico.
Ejemplo: Envase: 'body' 		Intentalo
contentstring"" Especifica el texto dentro del popover's body Intentalo
delaynumber, or object0 Especifica el número de milisegundos que se necesita para abrir y cerrar el popover .

Para especificar un retraso para abrir y otra para el cierre, utilizar la estructura del objeto:

delay: {show: 500, hide: 100} - que se llevará a 500 ms para abrir el popover , pero sólo 100 ms para cerrarla 		Intentalo
htmlbooleanfalse Especifica si acepta etiquetas HTML en el popover :
  • true - Aceptar las etiquetas HTML
  • false - No acepte las etiquetas HTML
Nota: El HTML debe ser insertado en el atributo del título (o el uso de la opción de título).

Cuando se establece en false (predeterminado), jQuery text() se utiliza el método. Utilice esta opción si está preocupado por los ataques XSS 		Intentalo
placementstring"right" Especifica el popover posición. Valores posibles:

  • "top" - Popover en la parte superior
  • "bottom" - Popover en la parte inferior
  • "left" - Popover a la izquierda
  • "right" - Popover a la derecha
  • "auto" - Permite al navegador decidir la posición del popover . Por ejemplo, si el valor es "auto left" , el popover mostrará en el lado izquierdo, cuando sea posible, de otro modo a la derecha. Si el valor es "auto bottom" , el popover se mostrará en la parte inferior cuando sea posible, de lo contrario en la parte superior
Intentalo
selectorstring, or the boolean falsefalse Agrega el popover a un selector especificado Intentalo
templatestring  HTML base utilizada para crear el popover.

El popover's título se inyecta en el .popover-título.

El popover's contenido será inyectado en el .popover-contenido.

.arrow se convertirá en el popover's flecha.

El elemento de envoltura más externa debe tener la .popover clase.
titlestring"" Especifica el texto del encabezado de la popover Intentalo
triggerstring"click" Especifica cómo el popover se dispara. Valores posibles:

  • "click" - Se dispara el popover con un clic
  • "hover" - Se dispara el popover en vuelo estacionario
  • "focus" - Se dispara el popover cuando se pone el foco (con la tecla tab o haciendo clic .eg)
  • "manual" - Se dispara el popover manualmente
Consejo: Para pasar varios valores, sepárelos con un espacio 		Intentalo
viewportstring, or object{selector: "body", padding: 0} Mantiene el popover dentro de los límites de este elemento.

Ejemplo: viewport: '#viewport' o {selector: '#viewport', padding: 0}

Popover Métodos

La siguiente tabla enumera todos los disponibles popover métodos.

Método Descripción Intentalo
.popover( options ) Activa el popover con una opción. Ver opciones anteriores para valores válidos Intentalo
.popover("show") Muestra el popover Intentalo
.popover("hide") Oculta el popover Intentalo
.popover("toggle") Alterna el popover Intentalo
.popover("destroy") Oculta y destruye el popover Intentalo

Popover Eventos

La siguiente tabla enumera todos los disponibles popover eventos.

Evento Descripción Intentalo
show.bs.popover Se produce cuando el popover está a punto de ser mostrado Intentalo
shown.bs.popover Se produce cuando el popover está totalmente muestra (después de haber completado transiciones CSS) Intentalo
hide.bs.popover Se produce cuando el popover está a punto de ser ocultado Intentalo
hidden.bs.popover Se produce cuando el popover está totalmente oculta (después de las transiciones CSS han completado) Intentalo
Ejemplos

Ejemplos

Custom Popover Diseño

Usar CSS para personalizar el aspecto de la popover :

Ejemplo

 /* Popover */
.popover {
    border: 2px dotted red;
}

/* Popover Header */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* Popover Arrow */
.arrow {
    border-right-color: red !important;
}
Inténtalo tú mismo "

❮ Anterior Siguiente Referencia ❯