How to update bootstrap popover text?

Solution 1:

You can access the options directly using the jquery data closure dictionary like this:

$('a#test').data('bs.popover').options.content = 'new content';

This code should work fine even after first initializing the popover.

Solution 2:

Hiya please see working demo here: http://jsfiddle.net/4g3Py/1/

I have made the changes to get your desired outcome. :)

I reckon you already know what you are doing but some example recommendations from my end as follows for sample: http://dl.dropbox.com/u/74874/test_scripts/popover/index.html# - sharing this link to give you idea for different link with different pop-over if you will see the source notice attribute data-content but what you wanted is working by the following changes.

Have a nice one and hope this helps. D'uh don't forget to up vote and accept the answer :)

Jquery Code

var i = 0;
$('a#test').click(function() {
    i += 1;

    $('a#test').popover({
        trigger: 'manual',
        placement: 'right',
        content: function() {
           var message = "Count is" + i;
             return message;
        }
    });
    $('a#test').popover("show");

});​

HTML

<a id="test">Click me</a>
​

Solution 3:

just in-case anyone's looking for a solution that doesn't involve re-instantiating the popover and just want to change the content html, have a look at this:

$('a#test').data('popover').$tip.find(".popover-content").html("<div>some new content yo</div>")

Update: At some point between this answer being written and Bootstrap 3.2.0 (I suspect at 3.0?) this changed a little, to:

$('a#test').data('bs.popover').tip().find ............

Solution 4:

Old question, but since I notice that the no answer provides the correct way and this is a common question, I'd like to update it.

Use the $("a#test").popover("destroy");-method. Fiddle here.

This will destroy the old popover and enable you to connect a new one again the regular way.

Here's an example where you can click a button to set a new popover on an object that already has a popover attached. See fiddle for more detail.

$("button.setNewPopoverContent").on("click", function(e) {
    e.preventDefault();

    $(".popoverObject").popover("destroy").popover({
        title: "New title"
        content: "New content"
    );
});