Bootstrap popover, изображение как контент

Я пытаюсь:

$("a[rel=popover]").popover({
    html:       true,
    trigger:    'hover',
    content:    '<img src="'+$(this).data('img')+'" />'
});

но он не работает, потому что $(this).data('img') не работает.

Почему я это делаю, у меня конфликты с шаблонами и html в атрибуте data-content. Поэтому я помещаю источник изображения в атрибут data-img и хотел бы захватить его, чтобы он помещал его в элемент img.

Я пробовал это, но работает не полностью:

$("a[rel=popover_img]").popover({
    html:       true,
    trigger:    'hover',
    content:    '<img src="#" id="popover_img" />'
}).hover(function(){
    $('#popover_img').attr('src',$(this).data('img'));
});

Я надеюсь, что кто-то может мне помочь:)

Ответ 1

В настоящий момент ваш this ссылается на текущую область, тогда как вы хотите ссылаться на элемент, к которому прикреплен экземпляр Popover. Это делается просто, обернув выражение для content в функции:

$('a[rel=popover]').popover({
  html: true,
  trigger: 'hover',
  content: function () {
    return '<img src="'+$(this).data('img') + '" />';
  }
});

См. демонстрацию:

Plunker

Ответ 2

Альтернативой тому, что предложил merv, для простоты вы можете встроить много свойств jquery в html и оставить jquery в легком весе, например,

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

и вызовите popover через jquery

$('["popover"]').popover()

Точки, которые следует учитывать при использовании этого подхода, data-html должны быть установлены в true, иначе изображение не будет интерпретироваться как html, а как текст