Bootstrap popover content cannot changed dynamically

Question

I use the code as follows:

$(".reply").popover({
  content: "Loading...",
  placement: "bottom"
});

$(".reply").popover("toggle");

which creates the popover and its content correctly. I want to load a new data into the popover without closing the popover.

I've tried the following:

var thisVal = $(this);
$.ajax({
  type: "POST",
  async: false,
  url: "Getdes",
  data: { id: ID }
}).success(function(data) {
  thisVal.attr("data-content", data);
});

After this call the data in the element is changed but not in the popover which is shown.

How should i do this?

Ironlike

you can also access the popover's inner element and change the content there via jQuery, e.g. $(".popover-content").html(my_new_content) – Ronn

Answer 1

If you grab the popover instance like this:

var popover = $('.reply').data('bs.popover');

Then, to redraw the popover, use the .setContent() method:

popover.setContent();

I found out browsing the source: https://github.com/twitter/bootstrap/blob/master/js/popover.js

So, in your example, try:

thisVal.attr('data-content',data).data('bs.popover').setContent();

Update

The setContent() method also removes the placement class, so you should do:

var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);

Demo: http://jsfiddle.net/44RvK

Renferd

ya it works but the design of the popover changed after redrawing is there any way to keep the existing design – Ironlike

Yea, it seems to remove the placement class too, so just add the class again. See demo: jsfiddle.net/44RvK – Renferd

The popover is not re-positioned after changing the content to something that takes up more space: jsfiddle.net/g4kZS - only when it is closed and opened again. – Beall

This way have too many side effect, see my answer below, much easier and better in my opinion – Confidence

the source file is github.com/twitter/bootstrap/blob/master/js/popover.js – Engulf

recently the data tag for popover was changed, so you need to use .data('bs-popover') instead of .data('popover') – Engulf

.data('bs.popover') instead of .data('popover') in the latest version – Gargantuan

Updated this to bs.popover. – Thirtyone

If you need to reposition the offset calculated_offset = popover.getCalculatedOffset( popover.options.placement, popover.getPosition(), popover.$tip[0].offsetWidth, popover.$tip[0].offsetHeight); popover.applyPlacement(calculated_offset, popover.options.placement); A little bit messy... – Wapentake

Using bootstrap 4, there is no problem with the placement being lost but you need to call popover.update() after popover.setContent() to reposition the popover according to the content. – Spathe

real heroes don't wear capes. – Levey

Answer 2

Yes you can, in fact the easiest way haven't been suggested yet.

Here's my way ->

    var popover = $('#example').data('bs.popover');
    popover.options.content = "YOUR NEW TEXT";

popover is an object if you want to know more about it, try to do console.log(popover) after you define it to see how you can use it after !

EDIT

As of Bootstrap 4 alpha 5, the data structure is a bit different. You'll need to use popover.config.content instead of popover.options.content

Thanks to @kfriend for the comment

Confidence

it's working fine, just set content as Yann specified then call popover.show(). that's the best answer "short, no side effects to counter like some of other answers" – Welldefined

I used this for popover.options.placement = 'bottom', thanks Yann! – Madder

.data('bs.popover') instead of .data('popover') in the latest version – Gargantuan

Worked for me in BS3; quick n' easy. I think it's the best answer here. – Ethnarch

This should be the accepted answer, no messing around with classes or anything - simples. – Monserratemonsieur

As of Bootstrap 4 alpha 5, the data structure is a bit different. You'll need to use popover.config.content instead of popover.options.content. – Pandemic

Answer 3

In bootstrap 3:

if($el.data('bs.popover')) {
    $el.data('bs.popover').options.content = "New text";
}
$el.popover('show');

Pastrami

Answer 4

This answer from 2012 does not work with Bootstrap 3 popovers. I extracted a working solution from this question:

$("#popover").attr('data-content', 'new content');

Ninepins

This is absolutely the only way I got this to work on a specific popover with bootstrap 3. For some reason, $("#popover").data('content', 'new content'); does not work so I originally ignored this solution. Thanks! – Sharenshargel

yup, on bs3, this was my only option on dynamic changes - thanks – Medusa

Answer 5

Most of these solutions actually seem hacky to me. Bootstrap standard docs have a method destroy that can be used. So, on change of content via some event you can simply destroy and then recreate content.

.popover('destroy')

This properly dynamically loads, refreshes and re-renders the content of the popover.

Idioblast

Creating the popover isn't that complicated and I have also had good luck with using destroy and then re-creating the popover. – Confetti

Here's a fiddle that can load dynamic data, but its flashes the popover. jsfiddle.net/dbuj2Lnt/1 – Saipan

Answer 6

SIMPLE SOLUTION

You can try with this :

//Bootstrap v3.3.7 var popoverEl = $("#popover"); popoverEl.attr("data-content", "NEW CONTENT"); popoverEl.popover("show");

Thanks.

Jonas

This is the correct answer for Bootstrap 3.x. No need to use setContent().This works with a string or HTML content. – Follicle

Yes, I agree with this for Bootstrap 3.x – Jonas

calling popoverEl.popover("show") makes my already visible popover go away :-(. I just wanted it to rerender correctly in the right location with the new data. I'm using bootstrap 3.3.7. – Embodiment

it should be add with #19975059. Thanks :) – Loop

Answer 7

I solved the problem using @David and @Sujay sreedhar's answer, but if the popover is visible during the new content is loaded, the popover needs to be repositioned:

var popover = thisVal.attr('data-content',data).data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
// if popover is visible before content has loaded
if ($(".reply").next('div.popover:visible').length){
    // reposition
    popover.show();
}

If it is not repositioned and the new content has e.g. a different height, the popover will expand downwards and the arrow will be off target!

Also, when the button is clicked afterwards it will re-open the popover instead of closing it. The above code solves, that problem too.

Demo http://jsfiddle.net/whFv6/

(My edit was rejected, so I thought I'd post it here..)

Beall

Answer 8

After the popover has been correctly initialized, you can directly use jquery to replace the class="popover-content" element:

$(".popover-content").html('a nice new content')

Chimb

I like the idea but how would you update the content of a specific popover, if you have several initialized on a page? – Capitalist

Answer 9

you can just pass the title as function

var content = 'Loading...'

function dynamicContent(){
  return content
}
$(".reply").popover({
  content: dynamicContent,
  placement: "bottom"
});

$(".reply").popover("toggle");

and then change the variable content dynamically.

Enschede

Answer 10

<button data-toggle="popover" data-html="true" data-content='<div id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')

This is a very clean way.

Berget

+1 That totally made my day, used within the $( 'a[data-toggle="popover"]' ).on('inserted.bs.popover', function () {}); thing. – Cainozoic

Answer 11

I wrote an async popover for bootstrap 3.1.1. I just called it popoverasync. Here is a demonstration:

async popover demo

You can download the source of the demo here:

demo source

The trick, for me, was to write the getContent method of this async popover so the user's javascript function to retrieve the content will be invoked, but getContent will return a wait animation, synchronously, back to the caller of getContent. This way, the popover has content either way. First, while the user waits, and finally when the content arrives. What I am referring to can be found within extensions.js in the demo source:

Hope this helps you!

Dan

Margarettamargarette

I used the async pop-over and found out that if I am using ajax, the ajax is fired two times. First during .hasContent() check and second during .setContent(). Is there anyway to stop this? – Epicycloid

Please create a Github repo to log issues. – Epicycloid

Answer 12

HTML

<a data-toggle="popover" popover-trigger="outsideClick" title="Indicadores" data-content="" data-html="true" class="Evaluar" id="alun codigo"><span><i class="fa fa-check"></i>algun nombre</span></a>

JQUERY

$('a.Evaluar').on('click', function () {
    var a=$(this);//.attr('data-content', "mañana");
    $.ajax({
        url: "../IndicadorControlador?accion=BuscarPorProceso&cP=24",
        type: 'POST',
        dataType: 'json'
    })
            .done(function (response) {
                //alert("done. ");
                var ind = "";
                $(response).each(function (indice, elemento) {
                    //alert(elemento.strIdentificador);
                    //console.log('El elemento con el índice ' + indice + ' contiene ' + elemento.strIdentificador.toString());
                    ind += '<a href=#>'+elemento.strIdentificador.toString()+'</a>';
                });
              $(a).attr('data-content', ind);
            })
            .fail(function () {
                sweetAlert("ERROR!", " Algo salió mal en el controlador!", "error");
            })
            .complete(function () {
            });

    $('[data-toggle="popover"]').popover();
});

Circumjacent

Answer 13

When a popover is enabled, it retains its previous version(if it was created already) even if the data is change. You need to destroy the previous version to allow for the new popover to be created again. In Bootstrap 4.x do it by

.popover('dispose')

do it whenever there is a change in data through an ajax call.

Disorder

Answer 14

For Boostrap v4.3

The following code update the popover content just before it is displayed:

// When the popover is show
$('.my-popover').on('show.bs.popover', function () {
  // Update popover content
  $(this).attr('data-content', 'New content');
})

Test online on this JSFiddle.

Piane

Popover doesn't even toggle in the fiddle & this will not update it realtime, it will work when the popover is closed & open again. – Saipan

Here's a solution I'm using. https://mcmap.net/q/226261/-how-to-update-bootstrap-popover-text – Saipan

Answer 15

With bootstrap 4.6 I am using this code to update it:

$("#disk-usage-details").attr("data-content", "your new content to here");

all others did not work for me.

Forbore

Last solution on the page - of course :) For me this also was the only solution I could get to work with BS 4.6 – Draughtboard

Answer 16

Bootstrap v5

var element = document.getElementById('popElement');
var popover = bootstrap.Popover.getOrCreateInstance(element, { trigger: 'hover' });
element.addEventListener('shown.bs.popover', () => {
   // call your api, then:
   popover.setContent({ '.popover-body': 'updated content' });
}, {once : true});

Copycat