I'm trying to get the Bootstrap 2 "popovers" to:

A) work with dynamically generated content and
B) display an image inside of the popover.

My current code:

var image = '<img src="img/header/'+selection+'" />';
var previewLink = '<a class="headerPreview" href="#" rel="popover" >(Hover to Preview)    </a>';
$('#headerBlock').append(previewLink);
$('.headerPreview').popover({
    title: 'test',
    content: image
});

Right now, it does nothing when the link is hovered over. I'm not sure what I'm doing wrong.

I'm trying to get the Bootstrap 2 "popovers" to:

A) work with dynamically generated content and
B) display an image inside of the popover.

My current code:

var image = '<img src="img/header/'+selection+'" />';
var previewLink = '<a class="headerPreview" href="#" rel="popover" >(Hover to Preview)    </a>';
$('#headerBlock').append(previewLink);
$('.headerPreview').popover({
    title: 'test',
    content: image
});

Right now, it does nothing when the link is hovered over. I'm not sure what I'm doing wrong.

• javascript
• jquery
• twitter-bootstrap
• popover

Share Improve this question Follow edited Oct 21, 2012 at 9:34 Florent 12.4k1010 gold badges5050 silver badges5858 bronze badges asked Oct 19, 2012 at 20:39 tdctdc 5,4641212 gold badges5959 silver badges107107 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Try this: http://jsfiddle/KAvAZ/

The key is adding trigger: 'hover' to your popover object.

Each time you dynamically add some new content, if you want to make it popover-enabled (assume that your already add proper html tags), popover() function should be called right after you add the new content. This is what I do to enable popover on both original content and dynamically generated content.

This thread may help: Twitter Bootstrap Popovers not working for Dynamically Generated Content