twitter-bootstrap - bootstrap 3 popover with html

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

Question

Estoy usando el popover bootstrap de twitter here . En este momento, cuando me desplazo sobre el texto de popover aparece un popover con solo texto del atributo de data-content <a> . 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 de div , pero no funcionó.

HTML:

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

Answer 1

¿Por qué tan complicado? solo pon esto:

data-html=''true''

Answer 2

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 pasas una función se llamará para desenvolver datos de contenido
• si html no está permitido, los datos de contenido se aplicarán como texto
• si se permite html y los datos de contenido son cadenas, se aplicarán como html
• 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"
});

Answer 3

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

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

Luego tienes dos opciones para configurar el contenido de un Popover

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

Usar 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>

Puedes escapar el HTML manualmente o usar una función. No sé sobre PHP pero en Rails usamos * html_safe *.

Usando una función JS : Si haces esto, tienes 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 luego tu 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: Tuve algunos problemas cuando usé Popover y no establecí el atributo de título ... así que recuerde siempre establecer el título.

Answer 4

Otro método alternativo si desea simplemente tener una apariencia de pop over. A continuación está el método. Por supuesto, esto es algo manual, pero muy útil :)

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 5

Sobre la base de la respuesta de jävi, esto 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 6

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

Fuente de HTML para Popover (se agregó un pop de datos de atributos de datos que contendrá el valor para la identificación / clase DIV de destino):

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

HTML para el contenido de 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();
}});

Answer 7

¡Todas estas respuestas pierden un aspecto muy importante!

Al usar .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 ID se duplicarán.
2. Si carga los contenidos cada vez que se muestra el popover, perderá toda la información del usuario.

Lo que quiere hacer es cargar el objeto mismo 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();


});

Answer 8

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>