How to change content of a bootstrap popover that has already been displayed?

Question

I have a form with a password entered twice. I check password complexity and consistency and display appropriate error messages into a popover attached to the INPUT field:

<a href="#" id="aIdPwd2" data-toggle="manual" data-content="The password entered does not match the one previously entered" data-placement="right" href="#" rel="popover">
<input type="password" id="iIdPwd2" class="fmt1" size="60" value=""/>
</a>

With this code:

$("#aIdPwd2").popover({content: msg});

You can chose dynamicaly the message that will be displayed. But once it has been displayed once, it will then always remain the same.

I read many articles about this popular issue and did try many things (attach 2 different popover to the same input, change the inner html in the getElementsByClassName("popover-content"), destroy and recreate the popover, ..), but without any success so far.

A solution on how to change content of a bootstrap popover that has already been displayed or any kind of work-around would be highly appreciated.

Answer 1

In Twitter Bootstrap 3, I just update the content and then call show . Calling of the show ensure that its resized correctly and then positioned correctly.

$(".notes").data("bs.popover").options.content="Content1";
$(".notes").popover("show");
$(".notes").data("bs.popover").options.content="Content2";
$(".notes").popover("show");

If you are using data tags to show the content then you will need to update the data tag as that takes precedence. eg.

$(".notes").attr("data-content","Content1");
$(".notes").popover("show");
$(".notes").attr("data-content","Content2");
$(".notes").popover("show");

I like the second option better coz it doesn;t access the internals by doing data(bs.popover) but the first options is much faster as it doesn't update the dom. So pick what floats your boat.

Answer 2

document.getElementsByClassName("popover-content")[0].innerHTML = 'something else';

sure that this doesn't work?

tried it on this page and it works as expected.

UPDATE: it will work only if the popover is visible because the element is recreated/destroyed every mouseover/mouseout event

i guess it's not the best solution, but you can do this:

var msg = 'ben123 is not a goddamn password!';

document.getElementById('password').addEventListener('mouseover', function() {  
    document.getElementsByClassName("popover-content")[0].innerHTML = msg; 
});

and change msg when you need

Answer 3

The problem with solutions that rely on popover('show') is that if you do this in an event handler for the show event, you will end up with an infinite loop.

If you just want to display some content in your popover when it has already been shown , you will need to directly modify the DOM:

$("#aIdPwd2").next(".popover").find(".popover-content").html(msg);

For example, if you want a popover that will load some data from an API and display that in the popover's content on hover:

DOM:

<a href="#" id="myPopover" data-toggle="popover" data-title="Details" data-api-parameter="someValue">Hover here for details</a>

jQuery:

$("#myPopover").popover({
    trigger: 'hover'
}).on('shown.bs.popover', function () {
    var popover = $(this);
    var contentEl = popover.next(".popover").find(".popover-content");
    // Show spinner while waiting for data to be fetched
    contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>");

    var myParameter = popover.data('api-parameter');
    $.getJSON("http://api.example.com", {
        'apiParameter': myParameter
    }).done(function (data) {
        var result = data['apiReturnValue'];
        contentEl.html(result);
    }).fail(function (data) {
        result = "No info found.";
        contentEl.html(result);
    });
});

This, of course, assumes that you trust the data supplied by api.example.com. If not, you will probably want to escape the data returned to mitigate XSS attacks.

Answer 4

To replace the contents of a popover on an element, first call destroy. Tested on Bootstrap 3.1.1

$("#aIdPwd2").popover('destroy').popover({content: msg});