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?

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

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

Comments

[brentmc79]

So instead of re-initializing the popover, I should just assign a different function to the title/content attributes?