我正在使用 Twitter Bootstrap 弹出框创建“快速查看”效果，以便在人们将鼠标悬停在项目上时显示更多信息。弹出框的内容来自 Ajax 调用。
下面的代码在第一次悬停时工作正常；但是，在随后的鼠标悬停时，弹出框消失得太快，并且不允许您查看内容。
任何人都可以弄清楚问题可能是什么？
$(document).ready(function(){
//Quick view boxes
var overPopup = false;
$("a[rel=popover]", '.favorites').popover({
trigger: 'manual',
placement: 'bottom',
html: true,
content: function(){
var div_id = "div-id-" + $.now();
return details_in_popup(div_id, $(this).data('product-id'));
}
}).mouseover(function (e) {
// when hovering over an element which has a popover, hide
// them all except the current one being hovered upon
$('[rel=popover]').not('#' + $(this).data('unique')).popover('hide');
var $popover = $(this);
$popover.popover('show');
$popover.data('popover').tip().mouseenter(function () {
overPopup = true;
}).mouseleave(function () {
overPopup = false;
$popover.popover('hide');
});
}).mouseout(function (e) {
// on mouse out of button, close the related popover
// in 200 milliseconds if you're not hovering over the popover
var $popover = $(this);
setTimeout(function () {
if (!overPopup) {
$popover.popover('hide');
}
}, 200);
});
});
function details_in_popup(div_id, product_id){
$.ajax({
url: 'index.php?route=product/product/get_product_ajax',
type: 'post',
data: 'product_id=' + product_id,
dataType: 'json',
success: function(json){
if (json['success']) {
$('#' + div_id).html(json['success']);
}
}
});
return '<div id="'+ div_id +'">Loading...</div>';
}