javascript - modal - tooltip bootstrap css

¿Puedo usar contenido dinámico en una ventana emergente de Bootstrap?

Question

Estoy usando un menú emergente Bootstrap en una ''Región de repetición'' que muestra Testimonios. Cada testimonio tiene un botón ''Ver detalles de la propiedad'' que abre la ventana emergente. En el Pop over estoy deseando mostrar la imagen asociada con cada testimonio y los detalles de la imagen. La ruta de la imagen se almacena en una columna en la base de datos para mostrar la imagen de cada testimonio. Necesito vincular la fuente de la imagen al contenido, pero no acepta PHP. Estoy usando un script que me permite escribir HTML en el contenido, pero la imagen debe crearse dinámicamente. El texto dinámico funciona en la opción ''a'' tag ''title'' pero no para Content.

¿Alguien puede arrojar luz sobre esto?

Esto es lo que tengo.

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

Answer 1

Este es el enfoque genérico, pero utiliza el controlador ASP.Net para procesar la imagen. Usa cosas similares en PHP para generar imágenes dinámicamente.

<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

Un año de edad :( pero esto puede ayudar a otra persona.

Eliminar su script js y agregar esto:

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 3

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