Auto hide bootstrap popover [closed]

Question

I want to hide automatically the Bootstrap popovers after a few seconds. When the user hovers over a control, the popover must be displayed, but if the user doesn't move the mouse pointer, this popover must be hidden automatically after few seconds.

That is important because in a mobile phone or tablet when the user taps a control, the popover is displayed, and the focus remains on the same control while the user types something, with the popover hindering it.

Answer 1

The accepted answer works just fine, but here's a more bootstrap approach:

Original answer

$('.pop').on('shown.bs.popover', function () {
    var $pop = $(this);
    setTimeout(function () {
        $pop.popover('hide');
    }, 2000);
});

---

Update from limplash

This answer misses one key information!! you have to add the trigger option while initializing popover .. {trigger:"manual"} .. otherwise the bootstraps attaches an onclick event to which causes the issue of two click required after first use .. following should is a proposed solution

$("#element").popover({ trigger:"manual" }).click(function() { 
  var pop = $(this); 
  pop.popover("show") 
  pop.on('shown.bs.popover',function() { 
   setTimeout(function() {
    pop.popover("hide")}, 2200); 
  }) 
})

Answer 2

You could also add your own new data-attribute to your popovers as such:

$('[data-toggle="popover"][data-timeout]').on('shown.bs.popover', function() {
    this_popover = $(this);
    setTimeout(function () {
        this_popover.popover('hide');
    }, $(this).data("timeout"));
});

Now you could use

<span 
    data-toggle="popover" 
    data-timeout="2000" 
    title="A title" 
    data-content="Some explanatory text">
    Your text
</span>

and the popover disappears after being shown the number of milliseconds you specified in data-timeout.