HTML tags inside Bootstrap popover are not rendered

Question

I'm having an issue and I cannot figure out why the HTML tags inside a popover will not get rendered.

JS fiddle here: http://jsfiddle.net/792xcgju/

    <!-- Popover #1 -->
<a
    href="#"
    class="btn btn-primary"
    tabindex="0"
    data-toggle="popover"
    data-trigger="focus"
    data-popover-content="#a1"
    data-placement="top"
>Popover Example</a>

<hr>

<!-- Popover #2 -->
<a
    href="#"
    class="btn btn-primary"
    tabindex="0"
    data-toggle="popover"
    data-trigger="focus"
    data-popover-content="#a2"
>Popover Example</a>

<!-- Content for Popover #1 -->    
<div id="a1" class="hidden">
    <div class="popover-heading">This is the heading for #1</div>
    
    <div class="popover-body">
      <div class="pagination_content">
          <div class="page-jump-form">
          <div class="input-group input-group-sm">
              <input type="number" class="inputbox form-control"  min="1" max="999999" />
            <div class="input-group-btn">
              <input type="button" class="btn btn-default btn-sm" value="{L_GO}" />
            </div>
          </div>
        </div>  
      </div> 
    </div>
</div>   
    
<!-- Content for Popover #2 -->
<div id="a2" class="hidden">
    <div class="popover-heading">This is the heading for #2</div>
    
    <div class="popover-body">This is the body for #2<br>
        With <b>html</b> content    
    </div>
</div>

JS:

    $(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

The popover:

<!-- Content for Popover #1 -->  

fails to display the code.

The

<!-- Content for Popover #2 -->  

works fine but its just text based.

What am I doing wrong?

Answer 1

You simply need to add to the options

sanitize: false

and it will not sanitize the contents, and renders the input fields as desired, as listed in the options here: https://getbootstrap.com/docs/4.3/components/popovers/#options

Full example:

$(function(){
  $("[data-toggle=popover]").popover({
    sanitize: false // <-- ADD HERE
    html: true,
    content: function() {
        var content = $(this).attr("data-popover-content");
        return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    }
  });
});