Search code examples
javascriptcsstwitter-bootstrappopover

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

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.

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