¿Cómo hago que Bootstrap popover funcione con contenido HTML en un elemento separado?

Encontramos la solución a esta pregunta, al menos eso pensamos. Si presentas alguna duda coméntalo, que para nosotros será un placer responderte

Solución:

Cualquier texto/HTML que desee mostrar en la ventana emergente se puede agregar en un DIV que tiene un display:none; Propiedad CSS para él. Puede pasar una función al content propiedad de las opciones emergentes que obtiene el contenido de la oculta DIV. De esta manera, no es necesario hacer referencia por ID e insertar etiquetas de script.

Aquí hay un ejemplo http://jsfiddle.net/wb3n8/

HTML:

    

        

             
Panel title 1

        
        
Panel content 1
        
Here is some hidden content 1
    
    

        

             
Panel title 2

        
        
Panel content 2
        
Here is some hidden content 2
    
    

        

             
Panel title 3

        
        
Panel content 3
        
Here is some hidden content 3
    

CSS:

.my-popover-content 
    display:none;

JavaScript:

$(document).ready(function () 
    popoverOptions = 
        content: function () 
            // Get the content from the hidden sibling.
            return $(this).siblings('.my-popover-content').html();
        ,
        trigger: 'hover',
        animation: false,
        placement: 'bottom',
        html: true
    ;
    $('.panel-heading').popover(popoverOptions);
);

Una solución elegante es colocar el contenido HTML dentro de una etiqueta de secuencia de comandos con una identificación y luego agregar una data-target="element_id_goes_here" attribute al elemento que activará el popover. Dado que está utilizando popover, ya debería tener algún JavaScript genérico en algún lugar que inicialice el complemento. Puede ampliar este JavaScript con unas pocas líneas de código.

HTML

    

         
        
          Panel title