1

I am having trouble with Bootstrap 4 popovers.

My page has several divs that each contain the content of a popover, e.g., 

<div class="d-none" id="popover-content-cld">
<p>An infant is considered to have Chronic Lung Disease (CLD): [...]</p>
</div>

This popover should be used when the user clicks on e.g., this link:

<a tabindex="0" role="button" href="#" id="cld.210" 
 data-toggle="popover" data-trigger="focus" 
 title="Chronic Lung Disease (CLD)" 
 data-content="No additional information found, please contact support."> 
 <i class="fa fa-info-circle text-black-50" aria-hidden="true"></i></a>

I have several instances on the page that should use this same popover. They all start with the same prefix followed by a period followed by a unique number, making the ID of each tag with a popover unique. I have a default data-content message that is used on the a tag that should be replaced with a more informative message if it's available.

To update the content of the popover, I am using the following function that is called when the page is loaded:

$("[data-toggle=popover]").each(function(i, obj) {
  $(this).popover({
    html: true,
    content: function() {
      var id = $(this).attr('id').split(".");
      return $('#popover-content-' + id[0]).html();
    }
  });
});

The debugger clearly goes through the function for each element that is supposed to have a popover on the page. The popover content is also picked up correctly. However, the content of my popover never changes from the default.

What am I missing?

Beate Danielsen
  • 23
  • 1
  • 5

1 Answers1

0

I was able to get what I needed to work by instead calling a function that triggers just before the content of the popover is shown: 

$('a[data-toggle="popover"]').on('show.bs.popover', function () {
  var id = $(this).attr('id').split(".");
  $(this).attr('data-content', $('#popover-content-' + id[0]).html());
});
Beate Danielsen
  • 23
  • 1
  • 5