¿Es posible usar un div como contenido para Popover de Twitter?

Estoy usando el popover de bootstrap de twitter aquí . En este momento, cuando me desplazo sobre el texto emergente, aparece un mensaje emergente con solo texto del atributo <a>'s data-content. Me preguntaba si habría alguna forma de poner un <div>popover dentro. Potencialmente, me gustaría usar php y mysql allí, pero si pudiera hacer que un div funcione, creo que puedo resolver el resto. Intenté configurar el contenido de datos en una divID, pero no funcionó.

HTML:

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>

En primer lugar, si desea usar HTML dentro del contenido, debe establecer la opción HTML en verdadero:

$('.danger').popover({ html : true});

Luego tiene dos opciones para configurar el contenido de un Popover

• Use el atributo de contenido de datos. Esta es la opción por defecto.
• Utilice una función JS personalizada que devuelva el contenido HTML.

Uso de contenido de datos : necesita escapar del contenido HTML, algo como esto:

<a class='danger' data-placement='above' 
   data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
   title="Title" href='#'>Click</a>

Puede escapar del HTML manualmente o usar una función. No sé acerca de PHP, pero en Rails usamos * html_safe *.

Uso de una función JS : si hace esto, tiene varias opciones. Lo más fácil que creo es poner tu contenido div oculto donde quieras y luego escribir una función para pasar su contenido a popover. Algo como esto:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

Y luego su HTML se ve así:

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
  <div>This is your div content</div>
</div>

¡Espero eso ayude!

PD: He tenido algunos problemas al usar popover y no configurar el atributo de título ... así que recuerde siempre configurar el título.

Sobre la base de la respuesta de jävi, esto se puede hacer sin ID o atributos de botón adicionales como este:

http://jsfiddle.net/isherwood/E5Ly5/

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My first popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My second popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My third popover content goes here.</div>

$('.popper').popover({
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});

Otro método alternativo si desea simplemente tener una apariencia de pop over. El siguiente es el método. Por supuesto, esto es algo manual, pero agradablemente viable :)

HTML - botón

<button class="btn btn-info btn-small" style="margin-right:5px;" id="bg" data-placement='bottom' rel="tooltip" title="Background Image"><i class="icon-picture icon-white"></i></button>

HTML - popover

<div class="bgform popover fade bottom in">
            <div class="arrow"></div>
             ..... your code here .......
</div>

JS

$("#bg").click(function(){
        $('.bgform').slideToggle();
});

Tarde a la fiesta. Partiendo de las otras soluciones. Necesitaba una forma de pasar el DIV objetivo como variable . Aquí esta lo que hice.

HTML para fuente Popover (se agregó un atributo de datos data-pop que contendrá el valor para la identificación / clase de DIV de destino)

<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper">

HTML para contenido Popover (estoy usando la clase de arranque bootstrap):

<div id="popper-content" class="hide">Content goes here</div>

Guión:

$('.popper').popover({
placement: popover_placement,
container: 'div.page-content',
html: true,
trigger: 'hover',
content: function () {
    var pop_dest = $(this).attr("data-pop");
    //console.log(plant);
    return $("#"+pop_dest).html();
}});

Además de otras respuestas. Si permite las htmlopciones, puede pasar jQueryobjetos al contenido, y se agregará al contenido de popover con todos los eventos y enlaces. Aquí está la lógica del código fuente:

• si pasa una función, se llamará para desenvolver datos de contenido
• si htmlno está permitido, los datos de contenido se aplicarán como texto
• si está htmlpermitido y los datos de contenido son una cadena, se aplicarán comohtml
• de lo contrario, los datos de contenido se agregarán al contenedor de contenido de popover

$("#popover-button").popover({
    content: $("#popover-content"),
    html: true,
    title: "Popover title"
});

¡Todas estas respuestas pierden un aspecto muy importante!

Al usar .html o innerHtml o externalHtml, en realidad no está utilizando el elemento referenciado. Estás utilizando una copia del elemento html. Esto tiene algunos inconvenientes serios.

1. No puede usar ningún ID porque los ID se duplicarán.
2. Si carga el contenido cada vez que se muestra el popover, perderá toda la entrada del usuario.

Lo que quieres hacer es cargar el objeto en el popover.

https://jsfiddle.net/shrewmouse/ex6tuzm2/4/

HTML:

<h1> Test </h1>

<div><button id="target">click me</button></div>

<!-- This will be the contents of our popover -->
<div class='_content' id='blah'>
<h1>Extra Stuff</h1>
<input type='number' placeholder='number'/>
</div>

JQuery:

$(document).ready(function() {

    // We don't want to see the popover contents until the user clicks the target.
    // If you don't hide 'blah' first it will be visible outside of the popover.
    //
    $('#blah').hide();

    // Initialize our popover
    //
    $('#target').popover({
        content: $('#blah'), // set the content to be the 'blah' div
        placement: 'bottom',
        html: true
    });
    // The popover contents will not be set until the popover is shown.  Since we don't 
    // want to see the popover when the page loads, we will show it then hide it.
    //
    $('#target').popover('show');
    $('#target').popover('hide');

    // Now that the popover's content is the 'blah' dive we can make it visisble again.
    //
    $('#blah').show();


});

¿Por qué tan complicado? solo pon esto:

data-html='true'

here is an another example

<a   data-container = "body" data-toggle = "popover" data-placement = "left" 
    data-content = "&lt;img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' &gt;&lt;div&gt;&lt;h3&gt; <?php echo $row1['1'] ?>&lt/h3&gt; &lt;p&gt; &lt;span&gt;<?php echo $countsss ?>videos &lt;/span&gt;
&lt;span&gt;<?php echo $countsss1 ?> followers&lt;/span&gt;
&lt;/p&gt;&lt;/div&gt;
<?php echo $row1['4'] ?>   &lt;hr&gt;&lt;div&gt;
&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Follow  &lt;/button&gt;  &lt;/span&gt; &lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt; Go to channel page&lt;/button&gt;   &lt;/span&gt;&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Close  &lt;/button&gt;  &lt;/span&gt;

 &lt;/div&gt;">

<?php echo $row1['1'] ?>
  </a>