Popovers con Twitter Bootstrap

Código de ejemplo para construir elementos popovers con Twitter Bootstrap

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="bootstrap.css" rel="stylesheet">
    </head>
    <body>
	<h1>Popover</h1>

	<a id="item" class="btn btn-primary">Popover</a>

	<script src="jquery-1.8.3.js"></script>
	<script src="bootstrap.js"></script>
	<script>
	    $(function() {
	        $("#item").popover({ placement: 'right', html : true, trigger:'hover', title: 'Titulo Popover', content: 'Normal<br><b>Negrita<b>' });
	    });
	</script>
    </body>
</html>

La activación del popover la hacemos mediante Javascript asi:

$('#item').popover(options);

Donde options son atributos para configurar el elemento popover:

  • animation
  • html
  • placement
  • selector
  • trigger
  • title
  • content
  • delay
  • container

La descripción detallada para los valores que recibe cada uno de estos atributos se describen en la web del proyecto Popover Twitter Bootstrap.

Acerca de Moycas
Developer Web @moycc

6 Responses to Popovers con Twitter Bootstrap

  1. Gracias men, me sirvio de mucho (y)

  2. Alexander dice:

    Gracias amigo me has ayudado🙂

  3. una consulta. ¿como se pueden cargar datos de mysql en un popover?

    • Moycas dice:

      Hola, la verdad no he realizado algún ejercicio intentando cargar datos desde mysql, pero revisando la documentación oficial los elementos popover tiene una propiedad llamada “content” yo creo por ahí podrías encontrar la solución, Saludos!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: