Imposta dinamicamente il valore del popover con href sul rollover in Twitter Bootstrap 3.0

Question

Ho bisogno di fare uno show popover su un iframe utilizzando Twitter Bootstrap 3.0, popopver dovrebbe mostrare iframe basati sui valori forniti nei collegamenti usando l'evento onmouseover di href.

Ho ottenuto il primo collegamento funzionante ma non in 3.0, ma in 2.0.2, ma il secondo link dovrebbe cambiare il valore della variabile e mostrare un iframe diverso e non sembra sapere come fare esso.

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

Sei troppo convincente.

• # 1 Hai duplicato ID, è necessario assegnare ID univoco
• Hai errori di sintassi. Vedi la console.
• Se è necessario mostrare il popover di bs su hover, è sufficiente impostare la destinazione nelle impostazioni del popover bs o come attributo di dati.
• È necessario mostrare l'iframe come contesto e non il rappresentante di testo in html di iframe, quindi è necessario impostare data-trigger = "hover" o nelle impostazioni.
• È necessario inialte la popover o convertire l'oggetto da popover chiamando il costruttore e il motivo è attestato nel documento come di seguito:

Per motivi di prestazioni, il tooltip e Popover data-API sono opt in. Se si desidera utilizzarli basta specificare un'opzione di selezione.

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