引导JS popover获取自我内容

Bootstrap JS popover take self content

本文关键字：自我 获取 JS popover 引导      更新时间：2023-09-26

我正在使用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>'
  })

使用这样的东西怎么样。。。在您拥有图像的div中的data-image-url。

这是Fiddle演示。

<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')+"'>";
    }
});
相关文章：