Bootstrap弹出窗口不适用于第一个mouseenter事件

Question

我使用如下代码

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

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

从第二次事件popover得到正常显示...这种活动的原因是什么以及如何纠正它......

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

Answer 2

我找到了答案，添加以下代码使其正常工作

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

Answer 3

您应该使用selector属性来委派Popover插件（see docs）。像这样：

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

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

Answer 4

只需选择您的元素，然后使用悬停

调用popover

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