CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Kyle Crabtree
Kyle Crabtree

Reputation: 208

How can I hide popovers on page when clicking a new one?

Using bootstrap 3, I have created multiple popovers on my page and are shown by clicking on them. How can I hide all currently open popovers before opening the new one clicked on? Currently when I click on "Item 1" it opens and closes just fine, but if "Item 1" is open and then I click on "Item 2", now both are open.

Example code:

Item 1:<a href="javascript:void(0)" data-toggle="popover" data-placement="top" title="Unavailable">Unavailable</a>
<br />
Item 2:<a href="javascript:void(0)" data-toggle="popover" data-placement="top" title="Unavailable">Unavailable</a>

$(function () {
  $('[data-toggle="popover"]').popover({
      html: true,
      content: '<removed html to keep it short>',
      title: 'Unavailable',
      trigger: 'click',
      animation: true
  })
})

Upvotes: 1

Views: 252

Answers (1)

Brad Christie
Brad Christie

Reputation: 101604

According to the docs:

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

So, change your trigger to focus instead of click.

Upvotes: 1

Related Questions