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