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.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>
You are overcomplicating i believe.
data-trigger = "hover"
or in the settings.For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
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();
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With