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?

you can also access the popover's inner element and change the content there via jQuery, e.g. $(".popover-content").html(my_new_content) — tmaximini, Nov 26 '12 at 13:26

score 86 · Accepted Answer · edited Jun 05 '15 at 19:25

86

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

edited Jun 05 '15 at 19:25

rekans

342
3
11

answered Nov 26 '12 at 12:47

David Hellsing

106,495
44
176
212

ya it works but the design of the popover changed after redrawing is there any way to keep the existing design – Aravindhan Nov 26 '12 at 13:04
1

Yea, it seems to remove the placement class too, so just add the class again. See demo: http://jsfiddle.net/44RvK/ – David Hellsing Nov 26 '12 at 13:18
1

The popover is not re-positioned after changing the content to something that takes up more space: http://jsfiddle.net/g4kZS/ - only when it is closed and opened again. – mlunoe May 28 '13 at 08:06
This way have too many side effect, see my answer below, much easier and better in my opinion – Yann Chabot Oct 10 '13 at 20:58
the source file is https://github.com/twitter/bootstrap/blob/master/js/popover.js – comp500 Oct 18 '13 at 17:38
5

recently the data tag for popover was changed, so you need to use .data('bs-popover') instead of .data('popover') – comp500 Oct 18 '13 at 17:39
6

.data('bs.popover') instead of .data('popover') in the latest version – Jeffrey Nicholson Carré Dec 06 '13 at 02:19
Updated this to bs.popover. – mahemoff Dec 26 '14 at 00:17
2

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... – user1318677 Sep 30 '15 at 19:36
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. – Yepeekai Sep 19 '18 at 17:29
real heroes don't wear capes. – php_nub_qq Nov 26 '20 at 20:22

Yann Chabot · Answer 2 · 2016-12-30T14:51:59.803

77

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

edited Dec 30 '16 at 14:51

answered Jul 25 '13 at 17:27

Yann Chabot

4,789
3
39
56

2

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" – Basemm Jul 30 '13 at 03:05
2

I used this for `popover.options.placement = 'bottom'`, thanks Yann! – id.ot Oct 31 '13 at 16:45
9

.data('bs.popover') instead of .data('popover') in the latest version – Jeffrey Nicholson Carré Dec 06 '13 at 02:20
2

Worked for me in BS3; quick n' easy. I think it's the best answer here. – Phil Nicholas Dec 08 '15 at 21:21
1

This should be the accepted answer, no messing around with classes or anything - simples. – Steve Childs Mar 08 '16 at 10:10
3

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`. – kfriend Dec 29 '16 at 22:29

score 22 · Answer 3 · answered Feb 20 '14 at 17:53

22

In bootstrap 3:

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

answered Feb 20 '14 at 17:53

neiker

8,887
4
29
32

score 17 · Answer 4 · answered Feb 15 '17 at 18:35

17

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

answered Feb 15 '17 at 18:35

Mark L

400
1
3
11

1

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! – Abu Sulaiman Mar 16 '17 at 05:32
yup, on bs3, this was my only option on dynamic changes - thanks – jim tollan Apr 15 '17 at 11:00

score 10 · Answer 5 · edited Sep 22 '15 at 15:39

10

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.

edited Sep 22 '15 at 15:39

Kirby

15,127
10
89
104

answered Jan 15 '15 at 02:25

bjm88

690
1
8
16

1

Creating the popover isn't that complicated and I have also had good luck with using destroy and then re-creating the popover. – linuxdan Jul 14 '15 at 16:09
Here's a fiddle that can load dynamic data, but its flashes the popover. http://jsfiddle.net/dbuj2Lnt/1/ – Md. A. Apu Jun 06 '20 at 06:38

score 4 · Answer 6 · answered Sep 29 '16 at 00:36

4

SIMPLE SOLUTION

You can try with this :

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

Thanks.

answered Sep 29 '16 at 00:36

wilfredonoyola

485
5
12

1

This is the correct answer for Bootstrap 3.x. No need to use `setContent()`.This works with a string or HTML content. – Daniel Bonnell Apr 07 '17 at 15:47
Yes, I agree with this for Bootstrap 3.x – wilfredonoyola Jun 15 '17 at 01:28
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. – Ryan Shillington Sep 19 '17 at 16:08
it should be add with https://stackoverflow.com/questions/19974559/bootstrap-popover-toggle-only-show. Thanks :) – Benyamin Limanto Nov 27 '18 at 16:47

score 3 · Answer 7 · edited May 23 '17 at 11:47

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

score 1 · Answer 8 · edited Sep 22 '15 at 15:38

1

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')

edited Sep 22 '15 at 15:38

Kirby

15,127
10
89
104

answered Feb 10 '15 at 15:51

Lionel

387
3
18

1

I like the idea but how would you update the content of a specific popover, if you have several initialized on a page? – Seth Mar 18 '16 at 17:51

score 1 · Answer 9 · answered Aug 23 '16 at 11:58

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.

Ares · Answer 10 · 2017-12-18T17:49:25.477

1

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

edited Dec 18 '17 at 17:49

answered Dec 18 '17 at 17:44

Ares

21
1
3

+1 That totally made my day, used within the $( 'a[data-toggle="popover"]' ).on('inserted.bs.popover', function () {}); thing. – Mexicanoon Feb 06 '18 at 16:24

score 0 · Answer 11 · edited Mar 07 '14 at 16:18

0

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

edited Mar 07 '14 at 16:18

Dan K.K.

5,915
2
28
34

answered Mar 07 '14 at 15:57

Daniel Kemper

9
1

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? – Akshay Gundewar Apr 22 '16 at 11:41
Please create a Github repo to log issues. – Akshay Gundewar Apr 22 '16 at 11:54

score 0 · Answer 12 · edited Aug 01 '16 at 23:01

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

score 0 · Answer 13 · answered Jan 04 '19 at 07:24

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.

score 0 · Answer 14 · answered Dec 22 '19 at 08:54

0

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.

answered Dec 22 '19 at 08:54

Fifi

3,360
2
27
53

Popover doesn't even toggle in the fiddle & this will not update it realtime, it will work when the popover is closed & open again. – Md. A. Apu Jun 06 '20 at 07:59
Here's a solution I'm using. https://stackoverflow.com/a/62228583/5420070 – Md. A. Apu Jun 06 '20 at 08:01

Alp Altunel · Answer 15 · 2021-03-27T08:56:31.153

0

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.

edited Mar 27 '21 at 08:56

answered Mar 27 '21 at 08:44

Alp Altunel

3,324
1
26
27

Last solution on the page - of course :) For me this also was the only solution I could get to work with BS 4.6 – JonV Mar 17 '22 at 22:52

score 0 · Answer 16 · answered Jun 21 '23 at 07:45

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

Bootstrap popover content cannot changed dynamically

16 Answers16

HTML

JQUERY

Linked