Can I use dynamic content in a Bootstrap popover?

Question

I am using a Bootstrap Popover in a 'Repeat Region' which displays Testimonials. Each testimonials has a 'View Property Details' button which opens up the popover. In the Pop over I am wanting to display the image associated with each testimonial and details of the image. The image path is stored in a column in the database so to display the image for each testimonial I need to bind the image source to the content but it is not accepting PHP. I am using a script that allows me to write html into the content but the image needs to be created dynamically. Dynamic text works in the 'a' tag 'title' option but not for Content.

Can anyone shed light on this?

Here is what I have.

<script type="text/javascript">
 $(document).ready(function() {
  $("[rel=details]").popover({
  placement : 'bottom', //placement of the popover. also can use top, bottom, left or     right
  html: 'true', //needed to show html of course
  content : '<div id="popOverBox"><img src="<?php echo $row_rsTstmnlResults['image']; ?>"        width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
    <a href="#" rel="details" class="btn btn-small pull-right" data-toggle="popover"     title="<?php echo $row_rsTstmnlResults['property_name']; ?>" data-content="">View Property</a>

score 20 · Answer 1 · edited Nov 30 '16 at 14:22

20

var popover = $("[rel=details]").popover({
    trigger: 'hover',
    placement: 'bottom',
    html: 'true'
}).on('show.bs.popover', function () {
    //I saw an answer here  with 'show.bs.modal' it is wrong, this is the correct, 
    //also you can use   'shown.bs.popover to take actions AFTER the popover shown in screen.
    $.ajax({
        url: 'data.php',
        success: function (html) {
            popover.attr('data-content', html);
        }
    });
});

edited Nov 30 '16 at 14:22

shabeer90

5,161
4
47
65

answered Sep 17 '14 at 08:03

kataras

835
9
14

I think replacing the content after the popover is shown is a useful idea. – Edwin Dec 21 '17 at 17:12

Othman Dahbi-Skali · Answer 2 · 2015-11-13T17:41:29.607

9

One year old :( but this may help another person

Remove your js script and Add This :

var content = $('[id*="yourDivId"]');
var title = "Your title, you can use a selector...";

$('[data-toggle="popover"]').popover({
    html: true,
    content: function () {
        return content.html();
    },
    title: function() {
      return title.html();
    }
});

edited Nov 13 '15 at 17:41

answered Nov 13 '15 at 17:35

Othman Dahbi-Skali

592
8
5

score 4 · Answer 3 · answered Jan 30 '14 at 14:30

Here is the generic approach, but uses ASP.Net handler to process image. Use similar things in PHP to generate images dynamically

<script type="text/javascript">
 $(document).ready(function() {
  $("[rel=details]").popover({
  placement : 'bottom', //placement of the popover. also can use top, bottom, left or     right
  html: 'true', //needed to show html of course
  content : getPopoverContent(this)// hope this should be link
});
});

function getPopoverContent(this)
{
 return '<div id="popOverBox"><img src="/getImage.php?id="'+this.data("image-id")+' 
 width="251" height="201" /></div>'
}
</script>

<a href="#" rel="details" class="btn btn-small pull-right" 
data-toggle="popover"     data-image-id="5" data-content="">View Property</a>

score 1 · Answer 4 · answered Feb 21 '14 at 06:13

$("selector").popover({
        trigger : "manual",
        placement : 'right',
        html : true,
        template : '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
    }).popover("show");

    $.ajax({
        async : true,
        url : url,
        dataType : 'json',
        success : function(d) {
            $("#phover" + id).attr('data-original-title', d['heading']);
            $('.popover-title').html(d['heading']);
            $('.popover-content').html(d['body']);
        },
        beforeSend : function() {
            var loadingimage = '<div align="center"><img src="assets/pre-loader/Whirlpool.gif"></div>';
            $('.popover-title').html(loadingimage);
            $('.popover-content').html(loadingimage);
        }
    });

score 1 · Answer 5 · answered Jun 28 '20 at 07:17

my solution is based upon the previous solutions here, with a bit more. i needed (as usually), all the complexity: here's how you can create the popover content on demand when the event triggers, and have the selected element passed to the creating function.

function displayProductPrice(a, tag) {
    var div = a.closest('div');
    var secs = ['aggregated', 'compare', 'list', 'saved', 'details'];
    var title = '';
    for (var c in secs) {
        var obj = $('.product-price-' + secs[c], div);
        if (obj.length) {
            if (title) {
                title += '<br />';
            }
            title += obj.html();
        }
    }
    return '<' + tag + '>' + title + '</' + tag + '>';
}
$( document ).ready(function() {
  $(".product-price-expand").popover({
        content: function() {return displayProductPrice(this, 'h6')},
        title: function() {                
            return $('.product-id', this.closest('div')).html();
        },
        html: true,
        trigger: 'click focus',
        placement: 'auto'
    });
});

enjoy, hope this helps.

Can I use dynamic content in a Bootstrap popover?

5 Answers5

Linked