Bootstrap popover no funciona en Chrome

Question

http://www.rightoption.co/

Encontrará "Nuestro cliente" en la parte del lado derecho de la página, haga clic en las miniaturas se abre popover (Firefox), Pero no funciona en Google Chrome, por favor me ayude fuera de este

Editar: Sitio Web ya no está en alojamiento

Answer 1

es esto es porque el gatillo por defecto para el popover es el enfoque. En Firefox, cuando haces clic en algo, parece ganar foco, pero eso no parece ser cierto para Chrome en este caso.

Usted puede tratar de una de 2 cosas:

intenta establecer manualmente el gatillo de la etiqueta de ser "manual". Así que añadir este atributo de datos de disparo = "manual"

O

En su documento proceso de carga, en lugar de hacer:

$('#element, #element1').popover('toggle').popover('hide'); 

uso de esta línea en su lugar:

$('#element, #element1') 
    .popover() 
    .click(function(e) { 
     e.preventDefault(); 
     $(this).focus(); 
    }); 

Answer 2

El aceptada la respuesta está bastante anticuada ahora, pero me surgió en una búsqueda en Google, así que me gustaría añadir que a partir de la versión 2.3.0, Bootstrap ahora permite enviar 'hover focus' como disparador para que funcione en ambos. Y, lo que es más importante, también permite un activador de "clic" que funciona como cabría esperar (específicamente para Chrome).

Answer 3

¡Esto funcionó para mí!

var el = $('[data-toggle="popover"]'); 
el 
    .on('shown.bs.popover', function(){ 
     $(document).on('click.popover', function() { 
      el.popover('hide'); 
      $(document).off('click.popover'); 
     });        
    }) 
    .popover(); 

actualización: Lo anterior tuvo un problema por el que hacer clic en otro elemento popover mientras que un popover se muestra cierra el popover abierta pero no se abre la nueva. Lo siguiente cerrará el popover abierto Y abrirá el nuevo con un clic.

var el = $('[data-toggle="popover"]'); 
el 
    .on('click', function(e){ 
     var el = $(this); 
     setTimeout(function(){ 
      el.popover('show'); 
     }, 200); // Must occur after document click event below. 
    }) 
    .on('shown.bs.popover', function(){ 
     $(document).on('click.popover', function() { 
      el.popover('hide'); // Hides all 
     }); 
    }) 
    .on('hide.bs.popover', function(){ 
     $(document).off('click.popover'); 
    });