29 votos

bootstrap popover

No estoy seguro de cómo la trampa para el alcohol implementa el popover. He incluido bootstrap.JS, y tiene una función llamada Popover (P mayúscula), pero en su ejemplo, utilizan:

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

Ahora, dicen que requiere que se incluya la información de las herramientas, pero no sé lo que eso significa. Todos sus ejemplos incluyen un montón de archivos .JS y creo que en realidad están todos empaquetados juntos.

Y como estoy en la fase de prueba de concepto, donde intento que funcione bien la primera vez, no me preocupa el tamaño del archivo o el almacenamiento en caché.

27voto

ews2001 Puntos 1379

Aquí hay un ejemplo bastante simple :

<html> 
   <head>
       <link href="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
   </head>
   <body>
      <div class="container">
         <div class="well">
            <a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
         </div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
      <script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
      <script>
      $(function (){
         $("#example").popover();
      });
      </script>
   </body>
</html>

La muestra incluye el Javascript de la punta de la herramienta que necesitarás también. Sólo tienes que ver la fuente de la página.

11voto

merv Puntos 14713

La versión de bootstrap.JS que está incluido en la descarga que se encuentra en la página principal del proyecto ya incluye todos los plugins compilados en él. Eso incluye bootstrap-tooltip.JS y bootstrap-popover.JS .

Popover es el objeto constructor del plugin jQuery, pero no debería ser necesario instanciar eso directamente.

El plugin extenderá jQuery, añadiendo el método $.fn.popover() que al ser llamado creará una instancia de un objeto Popover y lo adjuntará al elemento seleccionado. Ese objeto puede ser accedido en tu elemento (digamos, id="elem" ) usando $('#elem').data('popover') .

Aquí hay una simple JSFiddle que demuestra una forma de crear un popup, básicamente usando lo que tenías en la OP, $('#elem').popover() .


Actualizar: JSFiddle with Bootstrap v.3

4voto

Zin Mi Tun Puntos 41

¿Por qué el popover y los tooltip no funcionan en el bootsrap?

La respuesta es el código de inicialización de popover o tooltip $("#myButton").popover(); debe ser colocado bajo <script src="js/jquery-1.10.1.min.js"></script>; y <script src="js/bootstrap.min.js"></script> .

Como el siguiente procedimiento. Creo que estará bien.

<button type="button" id="myPopover" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
      Popover on Right
</button>

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>

<script type="text/javascript">
      $('#myButton').tooltip();
      $('#myPopover').popover();
</script>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X