Bootstrap 3.0 Popovers e información sobre herramientas

84

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
Acabo de publicar la misma pregunta hace unos minutos, también usando BS3 con todo lo demás funcionando como Modals y Tabs pero sin Tooltips o Popovers ... lo actualizaré si encuentro algo.
— xXPhenom22Xx
para popover, las opciones no están definidas
— Cybermaxs
Por ahora, solo estaba tratando de obtener el comportamiento predeterminado, pero estoy interesado en que se muestre al pasar el mouse en lugar de hacer clic, pero eso fue lo siguiente. ¿Todavía necesito poner algo en las opciones?
— user2560895
El código anterior es el que estoy usando actualmente y todavía no funciona. ¿Alguna sugerencia? ¿Tengo algo en el orden incorrecto o algo así?
— user2560895

Respuestas:

147

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:

  1. Obtenga referencias para Twitter Bootstrap CDN desde aquí: http://www.bootstrapcdn.com/
  2. Pegue cada enlace en el bloc de notas y elimine TODO excepto la URL. Por ejemplo:
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. En jsFiddle, en el lado izquierdo, abra el menú desplegable de acordeón de Recursos externos
  4. Pegue cada URL, presionando el signo más después de cada pegado
  5. Ahora, abra el menú desplegable de acordeón "Frameworks & Extensions" y seleccione jQuery 1.9.1 (o lo que sea ...)

Ahora estás listo para ir.

— cssyphus
fuente
en jsFiddle, ¿por qué el disparador no está rodeado por comillas simples pero la ubicación sí?
— HPWD
No hay una buena razón, simplemente me lo perdí. Pero parece funcionar. Quizás las claves de una sola palabra no necesitan las comillas, a veces no son necesarias, sin embargo, generalmente las coloco.
— cssyphus
eso me suena lógico. Gracias por aclararlo.
— HPWD
4
eso me suena a galimatías. ¡Decir ah! solo tenía que decirlo;)
— Evan Larsen
¿Puedes usar ese método en relatividad para un contenedor específico? ¿Instanciar todas las descripciones emergentes o emergentes dentro de un contenedor específico?
— Michael Ecklund
231

Lo uso en todas mis páginas para habilitar la información sobre herramientas

$(function () { $("[data-toggle='tooltip']").tooltip(); });
— Evan Larsen
fuente
4
gracias, de todas las respuestas que he dado, diría que probablemente dediqué menos tiempo a esta. Pero, sin embargo, de alguna manera ha otorgado la mayor cantidad de puntos.
— Evan Larsen
Pero el problema es. no funciona con Chrome para mí. luego terminé haciendo algo jsfiddle.net/arunpjohny/4HptX/4 de esta publicación stackoverflow.com/questions/18372632/…
— Md. Salahuddin
@Md Salahuddin, entonces está funcionando ahora, una vez que haya actualizado su jquery? ¿Estás haciendo una pregunta o fue una afirmación?
— Evan Larsen
1
Es solo una declaración. i utilizado jsfiddle.net/arunpjohny/4HptX/4 lugar ya que este código no estaba trabajando con cromo para mi caso.
— Md. Salahuddin
27

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(); 
});
— Abhishek Goel
fuente
Esto no funcionará si desea tener la funcionalidad emergente para los datos que se cargan de forma asincrónica (ajax, angular, etc.) pero la respuesta a continuación sí.
— Adrian Hedley
6

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:

  • jQuery
  • interfaz de usuario de jQuery
  • Oreja
— Jonathan
fuente
1
Tuve un problema similar, estaba cargando jquery ui después de bootstrap, su respuesta me hizo darme cuenta del problema con eso.
— hubson bropa
verifique esto para popover, 1. Activación de Popovers, 2. Posicionamiento de Popovers a través de atributos de datos
— shaijut
5

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'
});
— Papa Noel
fuente
1
Esto es lo único que funcionó para mí, ya que el elemento popover puede no estar a la vista para empezar. ¡Gracias!
— J. Titus
0

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".

— cssyphus
fuente
Ok, he cambiado el código para que coincida con lo que sugirió, creo. Todavía no funciona. Todavía no conozco Javascript, así que esto es un poco complicado. Solo intento que los ejemplos funcionen de la misma manera.
— user2560895
El popover uno es un poco difícil, pero conseguí que el de información sobre herramientas funcionara como arriba.
— cssyphus
0

Solo necesita habilitar la información sobre herramientas:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
— xXPhenom22Xx
fuente
No, eso solo mostrará la ventana emergente cuando pase el mouse sobre ella, no la información sobre herramientas.
— CpnCrunch
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.