Make bootstrap popover work with custom html template

Question

I am using an input group textbox and I need the Bootstrap 3 popover to work and the popover template should be defined &n designed by me. So the html I have currently with

Answer 1

@code-jaff that is a great answer, but i noticed that the Working Demo's popover doesn't look like it's coming out of the button. If this is happening to anyone else, try adding container: 'body' to the popover options. Like this:

$('body').popover({
    selector: '[rel=popover]',
    trigger: 'click',
    content: content,
    template: popoverTemplate,
    placement: "bottom",
    html: true,
    container: 'body'
});