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?

Frymire

This might help you: #55791917 – Qoph

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();
    }
  });
});

Wallywalnut

Thanks so much! I completely missed it! – Frymire

Keep in mind this allows someone to inject XSS on your component: data-content="<script>alert('xss')</script>" – Split

I am running bootstrap 3.4, and adding sanitize fixed my same issue. – Quinquagesima

Thanks! I am using Bootstrap v3.4.1 and adding 'sanitize: false' fixed my issue too! – Umeko