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

Answer 2

I would prefer to have all the HTML in templates. It goes like this:

Something in Javascript

$(".btn").popover({
   template: $("#selector").html(),
   placement: "auto"
});

And in HTML

<div id="selector">
    Anything you want in your popovers, either dynamic or static
<div>

Answer 3

you are missing the content of the popover, you'll need something like this

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '</div>',
        '</div>'].join('');

    var content = ['<div class="timePickerCanvas">asfaf asfsadf</div>',
        '<div class="timePickerClock timePickerHours">asdf asdfasf</div>',
        '<div class="timePickerClock timePickerMinutes"> asfa </div>', ].join('');


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

Working demo