Javascript Bootstrap JS popover接管自己的内容

我正在使用Bootstrap3“带图像的popover”在悬停的图像上显示更大的版本

我希望脚本将悬停的图像作为内容，而不以ID=popover为目标，因此它可以处理多个不同的元素

var Popover = function (element, options) {
    this.init('popover', element, options)
  }

  if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')

  Popover.VERSION  = '3.3.4'

  Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
    placement: 'right',
    trigger: 'click',
    content: '',
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
  })

var Popover=函数（元素、选项）{
this.init（'popover'，元素，选项）
}
如果（！$.fn.tooltip）抛出新错误（'Popover需要tooltip.js'）
Popover.VERSION='3.3.4'
Popover.DEFAULTS=$.extend（{}，$.fn.tooltip.Constructor.DEFAULTS{
位置：'对'，
触发器：“单击”，
内容：“”，
模板：“”
})

在您拥有图像的div中使用这样的…

数据图像url

怎么样

这是你的电话号码

将鼠标悬停在我身上
盘旋我
$（'.show'）.popover({
“触发器”：“悬停”，
“html”：是，
“内容”：函数（）{
返回“”；
}
});

<div data-image-url="http://www.kiwibird.org/wordpress/wp-content/uploads/Five_Species_Of_Kiwi_Birds5.jpg" class="block1 show" rel="popover">Hover Me</div>  



<div data-image-url="http://mlbc.com.br/upload/blog/2014/12c92cf7aa5c8ee5a78f4eca149da8fe.jpg" class="block2 show" rel="popover">Hover Me</div>


$('.show').popover({
    'trigger':'hover',
    'html':true,
    'content':function(){
        return "<img src='"+$(this).data('imageUrl')+"'>";
    }
});