2

I'm creating a method to add multiple popovers that look like this:

My first JsFiddle, working output (click to view screenshot)

The above was what I've managed to create so far using the following code in my first JsFiddle:

Example 1 - Working! (now a broken code link)

I've created exactly the same DOM elements in the second JsFiddle (with same references to bootstrap, popper, material-icons, jquery, etc and the same css and .popover() function and settings) but for some reason my second example does not work. I do actually have a working popover made using document.createElement() elements on my main site so I don't know why this one isn't working.. I've tested this outside of JsFiddle to no good end, also. PLEASE HELP!

The link to my second JsFiddle: Example 2 - Sadly, not working! But why?? (now a broken code link)

EDIT: This lovely man just fixed my code in less than half an hour since the post was posted! Very happy with @MichaelWhinfrey and Stack Overflow for this! Here is the answer, which I will accept now:

seems like the popover function needs to be run after the elements are created, initialising them in a $(document).ready() may be the solution you're after. I updated your fiddle to include an example jsfiddle.net/0cwe1v9y – Michael Whinfrey 25 mins ago (2019-04-30 11:33:17Z)

mkoudounakou
  • 23
  • 4
  • Hi! You could try [this](https://stackoverflow.com/a/16991216/7734317). Also try to always put your code in your post. – seulgibear Apr 30 '19 at 10:55
  • see this [link](https://stackoverflow.com/questions/55791417/bootstrap-4-input-field-in-popover/55814396#55814396) also – Nisharg Shah Apr 30 '19 at 10:59
  • @NishargShah thank you, was looking through the code and noticed he uses a bootstrap class on his content wrapper div from the bootstrap 4 API `class="d-none"` so I tried the same: I commented `//div_uniqueId.style = "display:none;";` and then wrote `div_uniqueId.className = "d-none";` but still no fix, its weird because all my DOM elements are there at run-time, but they're not being shown when I click my popover-icon – mkoudounakou Apr 30 '19 at 11:20
  • @seulgibear thank you, I've just been looking at this haha xx Not had much luck though maybe I'm doing it wrong I tried: `$().on('DOMNodeInserted', function () { $(event.target).popover(popoverSettings); });` – mkoudounakou Apr 30 '19 at 11:22
  • 1
    @vickeycolors Thank you, will do so from now! – mkoudounakou Apr 30 '19 at 11:23
  • seems like the popover function needs to be run after the elements are created, initialising them in a $(document).ready() may be the solution you're after. I updated your fiddle to include an example http://jsfiddle.net/0cwe1v9y/ – Michael Whinfrey Apr 30 '19 at 11:33
  • 1
    @MichaelWhinfrey You fixed my code, thank you!! Honestly, you have saved me so much time; I wouldn't have thought to use '.popover-icon' as the selector! Please do post the answer so I can accept it officially, I would be more than happy to :D xx – mkoudounakou Apr 30 '19 at 11:51
  • @mkoudounakou that's great news. – Michael Whinfrey Apr 30 '19 at 12:03

1 Answers1

1

Re-applying the popover after everything is loaded using the .popover-icon selector seems to resolve the issue.

$(document).ready(function (){
  $(".popover-icon").popover({
        html: true,
        animation: true,
        placement: "right",
        trigger: 'focus',
        content: function() {
            var content = $(this).attr("data-popover-content");
            return $(content).children(".popover-body").html();
        }
    });
});
Michael Whinfrey
  • 573
  • 4
  • 14