You forgot to add a trigger in the popover options. The data-trigger in the element doesn’t do too much when you really only initialize the popover() once you click the element. In fact, your JS code would propably work better like so:

$("[data-toggle=popover]").popover({
    html : true,
    trigger: 'click',
    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();
    }
});

EDIT

Popover should generally be initialized on page load:

$("[data-toggle=popover]").popover();

Putting it inside a click event will not enable popover on the element until you click it first.

Removing the click event from your original JS code should enable it on page load.
If however, the element you mean to attach the popover to is dynamically added to the DOM after page load, you should reinitalize the popover after adding it.
Wrapping the popover in a function would make that much easier.

function addPopover(selector){
$(selector).popover({
        html : true,
        trigger: 'click',
        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();
        }
    });
}

And whenever you add an element to the page that should have a popover, you simply call the function, with a selector for the element. Example for the element you have in your code:

addPopover("[data-toggle=popover]");