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

Question

我需要使用Twitter Bootstrap 3.0制作一个poppos show 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"或设置.
• 您需要通过调用构造函数来隐藏弹出窗口或将对象转换为弹出窗口,原因在文档中说明如下:

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

• 演示BS 3
• 演示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();
})