Bootstrap popover không hoạt động trong Chrome

Question

http://www.rightoption.co/

Bạn sẽ tìm thấy "Khách hàng của chúng tôi" Trên RHS một bên của trang, Click lên hình nó mở popover (Firefox), Nhưng nó không làm việc trong Google chrome, Xin hãy giúp tôi trong số này

Sửa: website không còn trên lưu trữ

Answer 1

Điều này là do kích hoạt mặc định cho popover là trọng tâm. Trong Firefox, khi bạn bấm vào một cái gì đó, nó có vẻ để đạt được tập trung nhưng điều đó dường như không đúng cho Chrome trong trường hợp này.

Bạn có thể thử một trong 2 điều sau:

Cố gắng đặt trình kích hoạt trên thẻ thành "thủ công" theo cách thủ công. Vì vậy, thêm thuộc tính dữ liệu này kích hoạt = "bằng tay"

HOẶC

Trong onload tài liệu của bạn, thay vì thực hiện:

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

sử dụng dòng này thay vì:

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

Answer 2

Các chấp nhận câu trả lời là khá ngày nay, nhưng nó đã đưa ra cho tôi trong một tìm kiếm Google, vì vậy tôi muốn thêm rằng như của phiên bản 2.3.0 Bootstrap bây giờ cho phép gửi 'tập trung di chuột' như kích hoạt để nó sẽ làm việc trên cả hai. Và rất quan trọng, nó cũng cho phép trình kích hoạt 'nhấp chuột' hoạt động như bạn mong đợi (dành riêng cho Chrome).

Answer 3

Điều này phù hợp với tôi!

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

Cập nhật: Trên đây có một vấn đề trong đó nhấn một yếu tố popover trong khi một popover được hiển thị đóng popover mở nhưng không mở mới. Sau đây sẽ đóng cửa sổ bật mở và mở cửa sổ mới bằng một cú nhấp chuột.

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'); 
    });