Bootstrap popover, image as content
Solution 1
As it currently stands your this
is referencing the current scope, whereas you want to be referencing the element which the Popover instance is attached to. This is done simply by wrapping the expression you have for content
in a function:
$('a[rel=popover]').popover({
html: true,
trigger: 'hover',
content: function () {
return '<img src="'+$(this).data('img') + '" />';
}
});
See demo:
Plunker
Solution 2
An alternative to what merv proposed, for simplicity you can embed a lot of the jquery properties to the html and leave the jquery lightweighted e.g
<a href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<img src='http://localhost:15249/img1.jpg' width='200' />">Toggle popover</a>
and call the popover via jquery
$('["popover"]').popover()
Points to note when using this approach, the data-html should be set to true, else the image is not interpreted as html but as text
Solution 3
try this
[html]
<a href="#"><i class="menu-icon fa fa-picture-o fa-3x" data-rel="popover" title="<strong>Hi, I'm Popover</strong>" data-placement="top" data-content="<img src='https://www.google.co.id/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' width=50% height=50%>"></i></a>
[javascript]
$(document).ready(function() {
$('[data-rel=popover]').popover({
html: true,
trigger: "hover"
});
})
[check this out] https://jsfiddle.net/j4qptkzr/20/
Roy
I'm a enthusiastic full-stack developer who loves cool new stuff.
Updated on February 22, 2020Comments
-
Roy over 4 years
I'm trying to this:
$("a[rel=popover]").popover({ html: true, trigger: 'hover', content: '<img src="'+$(this).data('img')+'" />' });
but it doesn't work because the $(this).data('img') doesn't work.
Why I do this, I've got conflicts with templating and html in the data-content attribute. So I place the image source in a data-img attribue and like to grab that en place it into a img element.
I've tried this, but works not fully:
$("a[rel=popover_img]").popover({ html: true, trigger: 'hover', content: '<img src="#" id="popover_img" />' }).hover(function(){ $('#popover_img').attr('src',$(this).data('img')); });
I hope somebody can help me out :)