5

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.

4 Answers 4

14

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.

4
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

3
  • I've made a few more tests with this solution and found a few interresting things: 1) You need to make the $("#example").popover('show'); prior to set anything into document.getElementsByClassName("popover-content")[0].innerHTML or the element will not exist and this will cause an error. 2) If you trigger the javascript that display/set from the button, then you suffer from some tricky side effects, the popver being hidden automaticaly despite the data-toggle="manual", causing an error and messing the full chain of events. If you can deal with those 2 limitations, then it works.
    – Pr Shadoko
    Aug 12, 2013 at 21:23
  • Can you share your test code, so I can check if I didn't miss anything?
    – Pr Shadoko
    Aug 12, 2013 at 21:25
  • when you close a modal in bootstrap all its html will be removed so you are not going to find anything by getElementsByClassName("popover-content") for that modal
    – Nitin Jain
    Dec 21, 2013 at 15:27
4

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.

3

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});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.