Bootstrap JS popover采取自我内容

时间:2015-05-17 17:58:00

标签: javascript jquery twitter-bootstrap

我正在使用Bootstrap 3“popover with image”在悬停的图像上显示更大的版本。

我希望脚本将内容映像作为内容而不是以ID = popover为目标,因此它将适用于多个不同的元素。

id

1 个答案:

答案 0 :(得分:0)

如果在你有图像的div中使用这样的东西...... data-image-url怎么样。

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