bootstrap popover - настраиваемые поля

Question

bootstrap popover позволяет изменить шаблон html, используемый в popover. я хочу, чтобы изменить исходный шаблон:

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

к чему-то вроде этого:

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

таким образом, что я могу явно передать текст колонтитула в мои варианты в JavaScript:

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

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

Причина, по которой я хочу сделать что-то вроде этого, заключается в том, что я хотел бы создать кучу разных popovers только с одной частью (например, нижним колонтитулом), изменяющейся на отдельных popovers. , но бутстрап не дает такой возможности. знаете ли вы обходное решение, которое я мог бы использовать?

Answer 1

Да, это обеспечивает способ настройки шаблона popover с опцией template.

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

Проверить это https://stackoverflow.com/a/24586543/1151408