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.
Share Improve this question edited Oct 21, 2012 at 9:34 Florent 12.4k10 gold badges50 silver badges58 bronze badges asked Oct 19, 2012 at 20:39 tdctdc 5,46412 gold badges59 silver badges107 bronze badges2 Answers
Reset to default 3Try 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