Как изменить содержимое всплывающего окна начальной загрузки, которое уже отображалось?

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

уверен, что это не работает?

попробовал на этой странице, и все работает как положено.

ОБНОВЛЕНИЕ: это будет работать только в том случае, если всплывающее окно видно, потому что элемент воссоздается/уничтожается при каждом событии mouseover/mouseout.

я думаю, это не лучшее решение, но вы можете сделать это:

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

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

и измените msg, когда вам нужно

В Twitter Bootstrap 3 я просто обновляю содержимое и затем вызываю show. Вызов show обеспечивает правильное изменение размера и правильное расположение.

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

Если вы используете теги данных для отображения содержимого, вам необходимо обновить тег данных, так как он имеет приоритет. например.

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

Мне больше нравится второй вариант, потому что он не обращается к внутренностям, выполняя data(bs.popover) но первый вариант намного быстрее, так как он не обновляет дом. Так что выбирайте то, что плавает в вашей лодке.

Проблема с решениями, основанными на popover('show'), заключается в том, что если вы сделаете это в обработчике событий для события show, вы получите бесконечный цикл.

Если вы просто хотите отобразить некоторый контент во всплывающем окне, когда он уже был показан, вам нужно будет напрямую изменить DOM:

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

Например, если вам нужно всплывающее окно, которое будет загружать некоторые данные из API и отображать их в содержимом всплывающего окна при наведении:

ДОМ:

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

Это, конечно, предполагает, что вы доверяете данным, предоставленным api.example.com. Если нет, вы, вероятно, захотите избежать возвращаемых данных, чтобы смягчить атаки XSS.

Чтобы заменить содержимое всплывающего окна на элементе, сначала вызовите команду destroy. Протестировано на Bootstrap 3.1.1

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