Bootstrap popover does not work on first mouseenter event

问题

I use the code as follows

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

and I triggered the jquery event as follows

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

But the problem is on the first hover event the popover not get showed

from the second event popover get showed normally... What is the reason for this kind of activity and how to rectify it...

回答1:

you need to add trigger: 'hover' or trigger: 'manual' to the options for the popover.. personally, I would replace your javascript with the following..

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

edit, if you have to use the javascript you have set, try this one

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

回答2:

I found the answer adding the following code made it work

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

回答3:

You should use the selector property to delegate the Popover plugin (see docs). Like thus:

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

_{Note: In practice, a more narrow delegate than 'body' would be recommended.}

回答4:

Just select your element, then call popover with hover

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

来源：https://stackoverflow.com/questions/13559209/bootstrap-popover-does-not-work-on-first-mouseenter-event