How to update bootstrap popover text?

Question

I am using bootstrap-popover to show a message beside an element.

If I want to show different text in the popover after the first time, the text does not change. Re

Answer 1

You can always directly modify the DOM:

$('a#test').next(".popover").find(".popover-content").html("Content");

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:

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

        var myParameter = popover.data('api-parameter');
        $.getJSON("http://ipinfo.io/" + myParameter)
        .done(function (data) {
          var result = '';
          if (data.org) {
            result += data.org + '
';
          }
          if (data.city) {
            result += data.city + ', ';
          }

          if (data.region) {
            result += data.region + ' ';
          }
          if (data.country) {
            result += data.country;
          }
          if (result == '') {
            result = "No info found.";
          }
          contentEl.html(result);
        }).fail(function (data) {
          result = "No info found.";
          contentEl.html(result);
        });
    });

Hover here for details on IP 151.101.1.69

This assumes that you trust the data supplied by the API. If not, you will need to escape the data returned to mitigate XSS attacks.