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

Question

Estoy usando el popover here del bootstrap de Twitter. En este momento, cuando me desplazo sobre el texto de popover aparece un popover con solo texto del atributo <a>data-content. Me preguntaba si había alguna forma de poner un <div> dentro del popover. Potencialmente, me gustaría usar php y mysql allí, pero si pudiera hacer funcionar un div creo que puedo descifrar el resto. Intenté configurar el contenido de datos en una identificación div, pero no funcionó.

HTML:

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

Answer 1

En primer lugar, si desea utilizar HTML dentro del contenido es necesario establecer la opción HTML para cierto:

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

entonces usted tiene dos opciones para configurar el contenido de un Popover

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

Utilizando datos de contenido: Es necesario escapar el 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> 

Usted puede escapar el código HTML manualmente o utilizar una función. No sé sobre PHP pero en Rails usamos * html_safe *.

Uso de la función JS: Si hace esto, tiene varias opciones. Creo que lo más fácil es esconder tu contenido div 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 a continuación, el código HTML se parece a esto:

<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 que ayude!

PD: Tuve algunos problemas al usar Popover y no establecí el atributo de título ... así que recuerde siempre establecer el título.

Answer 2

Otro método alternativo si desea simplemente tener una apariencia de pop over. A continuación está el método.Offcourse esto es una cosa manual, pero muy bien 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(); 
}); 

Answer 3

Sobre la base de la respuesta de Javi, este se puede hacer sin ID o atributos de botones 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(); 
    } 
}); 

Answer 4

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

HTML para la fuente Popover (añade un atributo de datos datos-pop que contendrá el valor de Identificación del DIV destino/o clase):

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

HTML para el contenido Popover (soy usando la clase piel de arranque):

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

Answer 5

Además de otras respuestas. Si permite html en las opciones, puede pasar el objeto jQuery al contenido, y se adjuntará al contenido de popover con todos los eventos y enlaces. Aquí está la lógica del código fuente:

• si se pasa una función que se llamará a desenvolver datos de contenido
• si html no está permitido datos de contenido se aplicarán como texto
• si html permitido y contenido de datos es cadena de caracteres que se aplicará como html
• datos de otro modo contenido se añadirán a contenedor de contenido de popover

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

Answer 6

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> 

Answer 7

¿Por qué tan complicado? sólo hay que poner esto:

data-html='true' 

Answer 8

Todas estas respuestas pierda un aspecto muy importante!

Al utilizar .html o innerHtml o outerHtml, en realidad no está utilizando el elemento al que se hace referencia. Está utilizando una copia del html del elemento. Esto tiene algunos inconvenientes graves.

1. No puede usar ningún ID porque los identificadores se duplicarán.
2. Si carga el contenido cada vez que se muestra el popover, perderá toda la información 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(); 


});