Bootstrap not setting popover template as expected

Question

I am trying to customize the template used for the bootstrap popover. I found this...

$('.item').popover({
    html : true,
    placement: 'left',
    content: function(){
        return $(this).next('.our-popup').html();
    },
    template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
})

This works great! but now I want to make the template dynamic so I change to the following

template: $(this).next('.our-popup').next('.our-template').html();

I get an error.

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

I also tried this...

template: function(){
  return $(this).next('.our-popup').next('.our-template').html();
}

And I get...

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type '#document' may not be inserted inside nodes of type '#document-fragment'.

Answer 1

I seem to have found a similar answer here Not exactly the same so not marking as duplicate. Also I have put together a jsfiddle for others

$(document).ready(function () {
  $('#popover').popover({
    html: true,
    title: function () {
        return $("#popover-head").html();
    },
    content: function () {
        return $("#popover-content").html();
    }
  });
});