Make bootstrap popover work with custom html template

css, html, jquery, twitter-bootstrap-3

Solution

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

Problem

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 me is : ``` <div class="row"> <div class="col-sm-2"> <div class="input-group"> <input type="text" class="form-control jq-timePicker" value="09:30"> <span class="input-group-addon" rel="popover"> <span class="glyphicon glyphicon-time"></span> </span> </div> </div> </div> ``` I want a popover to open when the input group icon is click. In this case when the span with class glyphicon-time is clicked a popover is or displayed with the following HTML: ``` <div class="timePickerWrapper popover"> <div class="arrow"></div> <div class="popover-content"> <div class="timePickerCanvas"></div> <div class="timePickerClock timePickerHours"></div> <div class="timePickerClock timePickerMinutes"></div> </div> </div> ``` JS written: ``` $(document).ready(function () { var popoverTemplate = ['<div class="timePickerWrapper popover">', '<div class="arrow"></div>', '<div class="popover-content">', '<div class="timePickerCanvas"></div>', '<div class="timePickerClock timePickerHours"></div>', '<div class="timePickerClock timePickerMinutes"></div>', '</div>', '</div>'].join(''); $('body').popover({ selector: '[rel=popover]', trigger: 'click', template: popoverTemplate, placement: "bottom", html: true }); }); ``` See the fiddle here: http://www.bootply.com/4fMzxGRpik Can anyone please help me correcting what mistake I am doing and what needs to be done to display a popvhover.

Original source