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 th

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.