引导程序弹出窗口-自定义字段

Question

bootstrap popover allows to change the html template used in the popover. i want to modify the original template:

<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

to something like this:

<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
    <div class="popover-footer"></div>
</div>

in such a way, that i can explicitly pass the footer text in my options in javascript:

options = {
    title: "my title",
    content: "my content",
    footer: "my footer"
}

$(".popoverElement").popover(options);

the reason i want to do something like this is that i would like to be able to create a bunch of different popovers with only one part (eg the footer) changing across individual popovers. but bootstrap doesn't provide such a possibility. do you know a workaround i could use?

Answer 1

Yes, it does provide a way of customizing the popover template, with template option.

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

Check this https://stackoverflow.com/a/24586543/1151408