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?

Do you think you could make your actual code work in JSFiddle? — romuleald, Sep 11 '15 at 19:54

score 1 · Accepted Answer · edited May 23 '17 at 11:44

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.

edited May 23 '17 at 11:44

Community

1
1

answered Sep 11 '15 at 21:35

grayspace

32
1
7

Wrapping your HTML in a div with text-align: center allowed me to see what you were talking about having the element "follow" its parent. For that issue, are you expecting users to resize the window? It seems to load at the correct position, no matter how wide the window is. – grayspace Sep 11 '15 at 21:42
Thanks for the reply greyspvce, that did exactly what I was trying to do with the loading of elements, I was missing the hiddenOnce query. – batas Sep 13 '15 at 10:15
Sorry for not really making sense. I'm battling with the popover following the link that fires it when resizing a window with the popover open. I'm not expecting a user to resize the window but if they do it looks like a glitch. Your code above works but as you mentioned you can't reopen the first popover once it is closed. Is it something to do with the not being "active" when loaded? – batas Sep 13 '15 at 10:30
In my fiddle posted above, at least for me, the first popover will reopen once it is closed. I'm not sure what the ".focus();" is adding to it besides making the link active by default. But, if that's what you want it to do, then I'm glad you got it all working. Cheers! – grayspace Sep 14 '15 at 13:47
Thanks very much for your help, I do have a focus effect on the on the actual page so was better off implementing it using the focus but will be using the JS tip on another page so thanks again – batas Sep 15 '15 at 09:10

batas · Answer 2 · 2015-09-14T10:08:34.247

Thanks to grayspace for getting the popover to show one on load and in addition to his answer i set the first popover to focus and it seems to have fixed the slight glitch.

$(function() {
 $("#popbadge1").focus();
});

https://jsfiddle.net/j4dut2ux/

Also you will see in the fiddle by displaying as an inline box and adding a div around the .a with relative and absolute positing accordingly the popover now follows its parent.

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

2 Answers2