Can I use dynamic content in a Bootstrap popover?

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

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

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>