How to get a Table to display in a Popover?

Bootstrap Studio Help
1

Hi,

I’m new here and to website creation, Javascript etc. I’ve got Popovers working with basic HTML content (fantastic) but I’ve been unable to get a Table to display, even a simple one added to the data-bs-content attribute.

I’ve been trying to use the first solution on this Stackoverflow post (javascript - Putting table into Bootstrap popover - Stack Overflow) but it’s not working (I used a jQuery to Javascript converter, which seems to have converted okay):

popover - table not working
popover - table not working1534×784 158 KB

I think I’m close but something’s missing. Can anyone help?

// to display Popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
 return new bootstrap.Popover(popoverTriggerEl)
})

//  for the Table
  document.querySelector('[data-bs-toggle=popover]').popover({
  content: document.querySelector('#myPopoverContent').html(),
  html: true
}).click(function() {
  document.querySelector(this).popover('show');
});

The CSS (“display: none” was switched off in the screenshot to show the table)

#myPopoverContent {
  display: none;
  float: right;
}

.popover {
  width: 700px;
}