Search code examples
javascriptjquerytwitter-bootstrappopover

Fading out twitter bootstrap popover on different element


I'm using popover() function to, well, have popovers. I'm using it like this:

$(status).popover({
      trigger: 'click',
      placement: 'top',
      html: true,
      title: "<div style='color:black'>Details:</div>",
      content: $(statuses).html()})

And it works just like i want it to. Except one thing, right now when user clicks on specific element, he gets popover, and he needs to click that element again to get rid of it, which is actually the case. Is it possible to make it disappear after clicking ANYWHERE on the page?


Solution

  • To do this you need to set the trigger property to focus:

    $(status).popover({
        trigger: 'focus',
        placement: 'top',
        html: true,
        title: "<div style='color:black'>Details:</div>",
        content: $(statuses).html()
    });
    

    This means that the popover is only active while the status element has focus in the browser, clicking anywhere else within the window will dismiss the popover.