Question

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.

Answer 1

Try this: http://jsfiddle.net/KAvAZ/

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