When using Twitter's Bootstrap, how can I change a popover's content?

Question

I'm using the popover feature from Twitter's Bootstrap js. I have a button that, when clicked, executes this javascript:

$("#popover_anchor").popover({trigger: "manual",
                              placement: "below",
                              offset: 10,
                              html: true,
                              title: function(){return "TITLE";},
                              content: function(){return "CONTENT TEXT";}});
$("#popover_anchor").popover("show");

There's also another button that executes basically the same javascript, except that the title and content functions return different text.

Note that they both define the popover on the same element, just with different content.

The problem is, once either button is clicked and the js is executed, no subsequent clicks from the other button will change the popover content. So once the popover is initialized, how can I update/change the content?

Answer 1

the purpose of the title attribute is to accept a value of type function which provides this very functionality.

for example: if you set your title to:

 title: function() { return randomTxt(); }

and you have,

function randomTxt()
{
    arr = ['blah blah', 'meh', 'another one'];
    return arr[Math.floor(Math.random() * 4)];
}

you will keep getting a different title for your popover. It is upto you to change the logic of randomText to fetch a title dynamically.

Answer 2

You can do that by accessing popover instance data directly as explained here:
https://github.com/twbs/bootstrap/issues/813

This example is taken from the lnked page:

var myPopover = $('#element').data('popover')
myPopover.options.someOption = 'foo'

Answer 3

Here is the solution I said right there:

Bootstrap popover content cannot changed dynamically

var popover = $('#exemple').data('bs.popover');
popover.options.content = "YOUR NEW TEXT";

popover is an object if you want to know more about it, try to do console.log(popover) after you define it to see how you can use it after !