Search code examples
jqueryhtmltwitter-bootstrappopover

bootstrap - how to display dynamic div inside popover

I'm working on Twitter bootstrap 3 and have a question about popover. I have many button in my page with class "details" and i want to use popover for these buttons. but popover's content must be different for each button. for this purpose, I have a

<div class="details-box" style="display: none;">
   <h1>Dynamic content</h1>
</div>

for each button. note content of these divs are dynamic and come from my server. now my question is: how can i use these divs inside popovers?

Solution

  • For each button, get the text inside h1 with text() function and assign it to data-content attribute

    Check this demo

    var box = $('.details-box');
box.each(function() {
    var that = $(this);
    var text = that.text();
    that.attr('data-content', text);
    that.popover();
});