使引导弹出与自定义html模板一起工作

Question

我正在使用一个输入组文本框，我需要Bootstrap 3的弹出器来工作，并且弹出器模板应该由我定义和设计。所以我目前拥有的html是：

<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>

我想要一个弹出打开时，输入组图标是单击。在本例中，当单击带有类glyphicon-time的span时，将弹出或显示以下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：

$(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
    });
});

请访问以下网址：http://www.bootply.com/4fmzxgrpik

可以请任何人帮助我纠正我正在做什么错误和需要做什么来显示一个popvhover。

Answer 1

@code-jaff这是一个很好的答案，但是我注意到工作演示的popover看起来不像是从按钮出来的。如果这种情况发生在其他人身上，试着在弹出选项中添加container:'body'。像这样：

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

Answer 2

我更希望所有的HTML都在模板中。是这样的：

Javascript中的内容

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

和HTML格式

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

Answer 3

您缺少了弹出窗口的内容，您将需要类似于以下内容的内容

$(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
    });
});

工作演示