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:

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

Solution 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

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

Baca Juga

$("#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.

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

JavaScript Download

How To Change Content Of A Bootstrap Popover That Has Already Been Displayed?

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "How To Change Content Of A Bootstrap Popover That Has Already Been Displayed?"