Dynamicznie ustawić wartość popover z href na najazdu na Twitter Bootstrap 3.0

Question

muszę popełnił popover pokazać iframe przy użyciu Twitter Bootstrap 3.0, to popopver powinien pokazać iframes oparte na wartościach określonych w linkach wykorzystujących zdarzenie onmouseover href.

Pierwszy działający link działa, ale nie w wersji 3.0, ale w wersji 2.0.2, ale drugi link powinien zmienić wartość zmiennej i pokazać inny element iframe, ale nie wiem, jak to zrobić to.

$(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

Powtarzacie się, wierzę.

• # 1 Masz zduplikowane id, należy przypisać niepowtarzalny identyfikator
• Masz błędy składniowe. Zobacz konsolę.
• Jeśli trzeba pokazać bs popover przy aktywowaniu wystarczy ustawić cel w ustawieniach bs popover danych lub jako atrybut.
• Trzeba pokazać iframe jako kontekst, a nie przedstawiciel tekst html iframe więc trzeba ustawić data-trigger = "hover" lub w ustawieniach.
• Trzeba inialte się popover lub konwertować obiekt do popover poprzez wywołanie konstruktora i przyczynę podano w dokumencie poniżej:

Ze względu na wydajność, dane-apis Tooltip i popover są opt-in. Jeśli chcesz ich użyć, po prostu określ opcję wyboru.

• 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(); 
})