Adding content to popover using JS

Issue

I am trying to add a button to my popover using JS. The reason being, I will eventually be generating these buttons using PHP, however it seems I am doing something wrong.

<div class="col-1">
  <a data-toggle="popover" id="bedsButton" data-placement="bottom" data-html="true" title="Number of Bedrooms">Beds</a>
</div>

$('[data-toggle="popover"]').popover();
$('#bedsButton').popover({
  content: `<button value="0" class="">0</button>`,
  trigger: 'click'
});

I've tried different ways of doing it with jQuery however I can't seem to figure it out

Solution

One solution is to set the html option to true and the sanitize option to false :

$('#bedsButton').popover({
  content: `<button value="0" class="">0</button>`,
  trigger: 'click',
  html: true,  
  sanitize: false,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<div class="col-1">
  <a data-toggle="popover" id="bedsButton" data-placement="bottom" data-html="true" title="Number of Bedrooms">Beds</a>
</div>

The button tag is not in the default whiteList of the sanitizer.

For more information you can take a look at popover options and the sanitazer section of Bootstrap's documentation.

Answered By - Tom