Bootstrap popover show/hide on select change

I have a Bootstrap popover on a select box. If I change the value of the select, the popover hides or shows.

• Why does the select trigger the popover?
• Is this the expected behavior?
• How can I prevent this and show/hide the popover independently the state of the select.

HTML:

<!-- language: lang-html -->

<select>
  <option>012</option>
  <option>345</option>
  <option>678</option>
  <option>910</option>
</select>

JavaScript:

<!-- language: lang-js -->

$('select').popover({
  title: 'Error',
  content: 'Error message'
});

Here's an example in JsBin

You'll need to handle the popover events to control when it's visible.

If you don't want the popup to ever close, that's really simple; just return false on the hide event like this:

<!-- language: lang-js -->

$('#myPopover').on("hide.bs.popover", function() {
  return false;
});

However, you probably want it to close eventually. So I'd recommend closing it conditionally when the control no longer has focus. When the controls attempts to hide, if the control still has focus, then prevent it from hiding.

Then, since you already handled the close event, you'll have to re-fire the close event later on during the element's blur event like this:

<!-- language: lang-js -->

$('#myPopover').on({
  "hide.bs.popover": function() {
    if ($(this).is(":focus")) return false;
  },
  "blur": function() {
    $(this).popover('hide');
  }
});

Demo in Stack Snippets.

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$('#myPopover').popover({
  title: 'Custom Message',
  content: 'Something to look at while selecting'
}).on({
  "hide.bs.popover": function() {
    if ($(this).is(":focus")) return false;
  },
  "blur": function() {
    $(this).popover('hide');
  }
});

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">

  <select id="myPopover">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>

</div>

<!-- end snippet -->