Bootstrap JS popover取自我內容

Question

我正在使用Bootstrap 3「popover with image」在徘徊的圖像上顯示更大的版本。

我希望腳本將已經懸停的圖像作爲內容，而不用定位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>' 
    }) 

Answer 1

如何使用像這樣... data-image-url在你有圖像的div。

這裏是Fiddle demo。

<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')+"'>"; 
    } 
});