bootstrap 2.3.2 popover html content issue

Question

I'm trying to populate a popover dynamically through

JAVASCRIPT

$("[data-bind='popover']").popover({
 trigger: 'hover',
 html: true,
 content: function(){ 
  return "<img src="+$(this).data('content')+" />";
 };
});

HTML

<a href="myreference.html" data-bind="popover" data-content="mylinktoimage">Brick</a> 

the problem is that if I set width and height inside the img tag inside js, the popover shows up. If I don't set them, first of all the anchor <a> the pointer cursor "vibrate" and the popover is not shown.

What problem can this be?

Answer 1

Are you sure the above code actually works? Couldnt' even get the popover to work, eg

..
return "<img src="+$(this).data('content')+" />;
 });

?? Think that is your issue.

<a href="myreference.html" data-bind="popover" data-content="flower.jpg">Brick</a> 

update, works with external online image as well

<a href="myreference.html" data-bind="popover" data-content="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Flower_poster_2.jpg/451px-Flower_poster_2.jpg">Brick</a> 

and

$("[data-bind='popover']").popover({
   trigger: 'hover',
   html: true,
   content: function(){ 
      return '<img src="'+$(this).data('content')+'">';
   }
});

produces :

$("[data-bind='popover']").popover({
   trigger: 'hover',
   html: true,
   content: function(){ 
      return '<img src="'+$(this).data('content')+'" width="50">';
   }
});

produces

With no "vibrations" etc.