Bootstrap popover, image as content

Question

I\'m trying to this:

$(\"a[rel=popover]\").popover({
    html:       true,
    trigger:    \'hover\',
    content:    \'

        

Answer 1

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

Answer 2

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