Soy nuevo en Bootstrap y tengo problemas para que funcionen las funciones de ventana emergente y descripción emergente. No tuve ningún problema con los menús desplegables y los modelos, pero parece que me falta algo para la ventana emergente y la información sobre herramientas.
Recibo información sobre herramientas, pero no tienen el estilo ni la ubicación como en los ejemplos de arranque. Y el popover no funciona en absoluto.
Por favor, eche un vistazo y hágame saber lo que me estoy perdiendo.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/index.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p id="tool"class="muted" style="margin-bottom: 0;">
Tight pants next level keffiyeh
<a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
<h3>Live demo</h3>
<div style="padding-bottom: 24px;">
<a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript">
$(document).ready(function() {
$('.tool').tooltip();
$('.btn').popover();
}); //END $(document).ready()
</script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>
</body>
</html>
javascript
jquery
css
twitter-bootstrap
usuario2560895
fuente
fuente
Respuestas:
Resulta que Evan Larsen tiene la mejor respuesta . Vota su respuesta (y / o selecciónala como la respuesta correcta) - es brillante.
Trabajando jsFiddle aquí
Usando el truco de Evan, puede instanciar todas las descripciones emergentes con una línea de código:
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});Verá que todas las descripciones emergentes de su párrafo largo tienen descripciones emergentes que funcionan solo con esa línea.
En el ejemplo de jsFiddle (enlace anterior), también agregué una situación en la que una información sobre herramientas (por el botón Iniciar sesión) está ACTIVADA de forma predeterminada. Además, el código de información sobre herramientas se AGREGA al botón en jQuery, no en el marcado HTML.
Panecillos hacen trabajar lo mismo que la información sobre herramientas:
$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});¡Y ahí lo tienes! Éxito al fin.
Uno de los mayores problemas para resolver estas cosas fue hacer que bootstrap funcionara con jsFiddle ... Esto es lo que debe hacer:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
Ahora estás listo para ir.
fuente
Lo uso en todas mis páginas para habilitar la información sobre herramientas
$(function () { $("[data-toggle='tooltip']").tooltip(); });fuente
Trabajar con BOOTSTRAP 3: breve y sencillo
Comprobar - JS Fiddle
HTML
<div id="myDiv"> <button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button> </div>Javascript
$(function () { $("[data-toggle='tooltip']").tooltip(); });fuente
Tenía que hacerlo en DOM listo
$( document ).ready(function () { // this has to be done after the document has been rendered $("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips $('[data-toggle="popover"]').popover({ trigger: 'hover', 'placement': 'top', 'show': true }); });Y cambiar mis órdenes de carga para que sean:
fuente
Por alguna razón, la única forma en que pude hacer que mi código funcionara es cambiando un par de cosas. Si nada te ha funcionado hasta ahora, dale una vuelta a esto:
$('body').popover({ selector: '[data-toggle="popover"]', trigger: 'hover', placement: 'right' });fuente
Tiene un error de sintaxis en su script y, como lo indica xXPhenom22Xx, debe crear una instancia de la información sobre herramientas.
<script type="text/javascript"> $(document).ready(function() { $('.btn-danger').tooltip(); }); //END $(document).ready() </script>Tenga en cuenta que utilicé su clase "btn-danger". Puede crear una clase diferente o usar un
id="someidthatimakeup".fuente
Solo necesita habilitar la información sobre herramientas:
$('some id or class that you add to the above a tag').popover({ trigger: "hover" })fuente
Si está utilizando Rails y ActiveAdmin, este será su problema: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 Básicamente, un conflicto con active_admin.js
Esta es la solución: https://stackoverflow.com/a/11745446/264084 (respuesta de Karen) tldr: Mueva activos de active_admin al directorio "proveedor".
fuente