Bootstrap popover, image as content

Question

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 :)

Answer 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

Answer 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