How add img to popover bootstrap

Question

This is my code

<a href="#" title="Header" data-toggle="popover" data-placement="left" data-trigger="hover" data-content="Some content">
     CLICK HERE
</a>

<script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
        });
</script>

This is resultset

My question how do you change "Some content" by img ?

Thanks

Answer 1

You need to add data-html="true" to your a tag like this:

<a href="#" title="Header" data-toggle="popover" data-placement="left" data-trigger="hover" data-content="Some content" data-html="true">
 CLICK HERE
</a>

Now change your data-content to include your html:

<a href="#" title="Header" data-toggle="popover" data-placement="left" data-trigger="hover" data-content="<img src='pathtoimage' />" data-html="true">
 CLICK HERE
</a>

Make sure you put the correct path to your image in the img tag.

Answer 2

You should use the popovers'options like html or template. These settings allow you to design the popover as you like, for example:

Html:

<div class="bs-example bs-example-padded-bottom"> 
     <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover">
          Click to toggle popover
     </button> 
</div>

JS:

$(document).ready(function () {
  $('[data-toggle="popover"]').popover({
    html: true,
    title: function () {
        return 'title';
    },
    content: function () {
        return '<p>Some image</p><img src="/images/someimage.jpg"></img>';
    }
  });
});