Question

我需要使用Twitter Bootstrap 3.0制作一个使用Twitter引导程序的iframe，它的popopver应该根据链接中使用href的onmouseover事件提供的值显示iframe。

我得到的第一个链接工作但不是3.0，但是在2.0.2中，但第二个链接应该改变变量的值并显示不同的iframe，我似乎不知道怎么做

$(window).load(function(){
var img = '<iframe frameborder="0" scrolling="no" height="220" width="420"
                  src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>';
$("#blob").popover({title: 'Last 10 spots for the selected station', content: img});
})  

<a href="#" id="blob" class="btn large primary" rel="popover" style="margin-top:
100px">hover for popover</a>

<a href="#" id="blob" class="btn large primary" rel="popover" onmouseover=""var img =
'<iframe frameborder="0" scrolling="no" height="220" width="420"
src="http://google.com"></iframe>';"" style="margin-top: 100px">hover for popover</a>

Answer 1

我相信你太复杂了。

＃1您有重复的ID，您应该指定唯一ID
您有语法错误。见控制台。
如果您需要在悬停时显示bs popover，则只需在bs弹出设置中设置目标或作为数据属性。
您需要将iframe显示为上下文，而不是iframe的html文本代表，因此您需要设置data-trigger = "hover"或在设置中。
您需要通过调用构造函数来隐藏popover或将对象转换为popover，原因在文档中说明如下：

出于性能原因，Tooltip和Popover data-apis是选择加入的。如果您想使用它们，只需指定一个选择器选项。

的 Demo BS 3

的 Demo BS 2

HTML：

<a href="#" id="blob" class="btn large primary" rel="popover" style="margin-top: 100px">hover for popover</a> <a href="#" id="blob2" class="btn large primary" data-trigger="hover" rel="popover" data-html="true" data-content='<iframe frameborder="0" scrolling="no" height="220" width="420" src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>' style="margin-top: 100px">hover for popover</a>

JS：

$(window).load(function(){ var img = '<iframe frameborder="0" scrolling="no" height="220" width="420" src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>'; $("#blob").popover({title: 'Last 10 spots for the selected station', content: img, html:true}); $('[rel="popover"]').popover(); })

在Twitter Bootstrap 3.0中使用href动态设置popover值

1 个答案: