Open one popover on page load and hide when clicked anywhere else + dynamically follow it's parent when resizing window

Question

So I've been playing around with the in built popovers from bootstrap. I am pretty new to JS so please be kind!

I've managed to get multiple popovers to show and hide in the way I like but I would very much like them to follow the element that fires the popover when resizing the window and also for the first popover to load when a user loads the page.

I've searched on here and got the first one to show when loading but it doesn't hide when anything else is clicked.

Using

$(function () { 
 $("#popbadge1").popover('show');
});

my js

$(document).ready(function () {

$("#popbadge1").popover({
    html : true, 
    content: function() {
      return $('#hiddenpopbadge1').html();
    },
});
$("#popbadge2").popover({
    html : true, 
    content: function() {
      return $('#hiddenpopbadge2').html();
    },
});
$("#popbadge3").popover({
    html : true, 
    content: function() {
      return $('#hiddenpopbadge3').html();
    },
});
});

my markup

<ul>      
 <li><a class="badge1" id="popbadge1" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">1</a></li>
 <!-- Popover 1 hidden content -->
 <div id="hiddenpopbadge1" style="display: none">
    <h3>Content</h3>
 </div>  

  <li><a class="badge2" id="popbadge2" href="#" role="button" data-trigger="focus" tabindex="0"  data-placement="bottom">2</a></li>
  <!-- Popover 2 hidden content -->
  <div id="hiddenpopbadge2" style="display: none">
    <h3>Content 2</h3>
  </div>

  <li><a class="badge3" id="popbadge3" href="#" role="button" data-trigger="focus" tabindex="0"  data-placement="bottom">3</a></li>
<!-- Popover 3 hidden content -->
<div id="hiddenpopbadge3" style="display: none">
    <h3>Content 3</h3>
</div>
</ul>

Ideally I would like the popover to follow the button that triggers it as well when the window is resized.

Anyone able to help?

Answer 1

For me, it's not clear what you mean by...

"I would very much like them to follow the element that fires the popover when resizing the window..."

However, getting the popover to show on page load is just a matter of putting your 1st code snippet inside the (document).ready().

And getting the popover to hide when anything else on the page is clicked is similar to this question, which works with something like this:

$(function () {
    // When anything is clicked...
    $('*').click(function (e) {
        // Except popbadge1
        if (e.target.attr != 'popbadge1') {
            // Hide the popover
            $("#popbadge1").popover('hide');
        }
    });
});

But there is something going on when you try to click back on the first link, where it won't open the popover. Possibly a conflict with Bootstrap, or something else I missed? Regardless, a simple check to see if the popover has been hidden once before solves it.

Here's the full solution at JSFiddle.