CODEWITHSUNDEEP
javascripttwitter-bootstrappopover
brentmc79
brentmc79

Reputation: 2541

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

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?

Upvotes: 12

Views: 15246

Answers (3)

Yann Chabot
Yann Chabot

Reputation: 4869

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 !

Upvotes: 0

anirvan
anirvan

Reputation: 4877

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.

Upvotes: 17

Paull
Paull

Reputation: 1030

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'

Upvotes: 6

Related Questions