最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Dynamically set popover value with href on rollover in Twitter Bootstrap 3.0 - Stack Overflow

programmeradmin5浏览0评论

I need to made a popover show an iframe using Twitter Bootstrap 3.0, it popopver should show iframes based on values provided in links using the onmouseover event of href.

I got the first link working but not in 3.0, but in 2.0.2, but the second link is supposed to change the value of the variable and show a different iframe and I don't seem to know how to do it.

$(window).load(function(){
var img = '<iframe frameborder="0" scrolling="no" height="220" width="420"
                  src="/?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=""></iframe>';"" style="margin-top: 100px">hover for popover</a>

I need to made a popover show an iframe using Twitter Bootstrap 3.0, it popopver should show iframes based on values provided in links using the onmouseover event of href.

I got the first link working but not in 3.0, but in 2.0.2, but the second link is supposed to change the value of the variable and show a different iframe and I don't seem to know how to do it.

$(window).load(function(){
var img = '<iframe frameborder="0" scrolling="no" height="220" width="420"
                  src="http://dxlite.g7vjr/?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."></iframe>';"" style="margin-top: 100px">hover for popover</a>
Share Improve this question edited Jun 25, 2015 at 7:58 R3uK 14.6k8 gold badges47 silver badges80 bronze badges asked Oct 15, 2013 at 0:02 MartinMartin 1211 silver badge7 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 8

You are overplicating i believe.

  • #1 You have duplicate id, you should assign unique id
  • You have syntax errors. See the console.
  • If you need to show bs popover on hover you just need to set the target in the bs popover settings or as a data-attribute.
  • You need to show the iframe as context and not the html text rep of iframe so you need to set data-trigger = "hover" or in the settings.
  • You need to inialte the popover or convert the object to popover by calling the constructor and the reason is stated in the document as below:

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

  • 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/?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/?dx=LU5DX&limit=10"></iframe>';
    $("#blob").popover({title: 'Last 10 spots for the selected station', content: img, html:true});
    $('[rel="popover"]').popover();
})  
发布评论

评论列表(0)

  1. 暂无评论