引导弹出框不适用于第一个 mouseenter 事件答案

【问题标题】：Bootstrap popover does not work on first mouseenter event引导弹出框不适用于第一个 mouseenter 事件
【发布时间】：2012-11-26 05:37:50
【问题描述】：

我使用代码如下

<a class="reply"  data-content="this is the mail" 
data-original-title="this is the title" rel="popover">this</a>

我触发jquery事件如下

$(document).on("mouseenter",".reply",function(event){
   $(this).popover({placement:'bottom'});
});

但问题出在第一个悬停事件上，弹出框没有显示

从第二个事件弹出框正常显示...这种活动的原因是什么以及如何纠正它...

【问题讨论】：

【解决方案1】：

您需要将trigger: 'hover' 或trigger: 'manual' 添加到弹出框的选项中。就个人而言，我会将您的javascript 替换为以下内容..

$(function(){
  $('.reply').popover({
    placement: 'bottom',
    trigger: 'hover'
  })
})

编辑，如果你必须使用你设置的javascript，试试这个

$(document).on("mouseenter",".reply",function(event){
  $(this).popover({
    placement:'bottom', 
    trigger: 'hover'
  }).popover('show');
});

【讨论】：

【解决方案2】：

我找到了添加以下代码的答案

$(document).on("mouseenter",".reply",function(event){
  $(this).popover({placement:'bottom'});
  $(this).popover('toggle');
});

【讨论】：

【解决方案3】：

您应该使用 selector 属性来委托 Popover 插件 (see docs)。像这样：

$('body').popover({
  placement: 'bottom',
  trigger: 'hover',
  selector: '.reply'
});

_{注意：在实践中，建议使用比'body' 更窄的代表。}

【讨论】：

【解决方案4】：

只需选择您的元素，然后通过悬停调用弹出框

$("[rel=popover]").popover({trigger:"hover"});

【讨论】：