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?

davidkonrad · Accepted Answer · 2013-09-17T15:27:58.107

2

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 :

enter image description here

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

produces

enter image description here

With no "vibrations" etc.

edited Sep 17 '13 at 15:27

answered Sep 17 '13 at 15:16

davidkonrad

83,997
17
205
265

I know, I tried in an external file and it does not work, my html is a bit longer than the one I wrote in question, but the concept is the same – steo Sep 17 '13 at 15:23
The problems seems to be with the `a` .. I don't know what to do, If i `mouseover` the anchor, the `pointer` and the `normal` cursor, alternate themselves. – steo Sep 17 '13 at 15:27
@steo, and it does not work **even** if you make the markup correct, as above? It sounds like you have an issue regarding the "I'm trying to populate a popover dynamically through" as you updated the question with. Have done a lot of bootstrapping, it cannot be bootstrap or the popover itself that is causing that error. Do you have any hover-effects in CSS? Or by javascript event? – davidkonrad Sep 17 '13 at 15:35

Tigran Petrossian · Answer 2 · 2013-09-17T15:32:01.003

1

seems like a missing quote before semicolon:

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

Working Fiddle - http://jsfiddle.net/tEWLw/2/

Update: another Fiddle. I'm nost sure what else is wrong here :)

edited Sep 17 '13 at 15:32

answered Sep 17 '13 at 15:16

Tigran Petrossian

1,158
1
7
16

Yes! +1- Now it also shows the image, if you target one in data-content :) Dont know with scaling. – davidkonrad Sep 17 '13 at 15:43

bootstrap 2.3.2 popover html content issue

2 Answers2