¿Es posible usar un DIV como contenido para el popover de Twitter?

Question

Estoy usando Popover de Bootstrap de Twitter aquí. En este momento, cuando me desplace sobre el texto de Popover, aparece un popover con solo texto del <a>'s data-content atributo. Me preguntaba si había de alguna manera poner un <div> Dentro del Popover. Potencialmente, me gustaría usar PHP y MySQL allí, pero si pudiera conseguir un DIV para trabajar, creo que puedo descubrir el resto. Intenté configurar el contenido de datos en un div ID, 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 usar HTML dentro del contenido, necesita establecer la opción HTML en verdadero:

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

Luego tiene dos opciones para establecer el contenido para un Popover

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

Utilizando el contenido de datos: Necesitas 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é sobre PHP, pero en Rails usamos *html_safe *.

Usando una función JS: Si haces esto, tienes varias opciones. Lo más fácil, creo que es poner su contenido DIV oculto donde quiera 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: He tenido algunos problemas al usar Popover y no configurar el atributo de título ... así que recuerde establecer siempre el título.

Answer 2

Sobre la base de la respuesta de Jävi, esto se puede hacer sin IDS 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();
    }
});

Answer 3

Otro método alternativo si desea tener un aspecto de pop. El siguiente es el método. Fuera de la cursura 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 4

Tarde a la fiesta. Aumentando las otras soluciones. Necesitaba una forma de pasar el Div Target como un variable. Aquí esta lo que hice.

HTML para la fuente de Popover (agregó un atributo de datos data que mantendrá el valor para la identificación de DIV de destino o la clase):

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

HTML para contenido de Popover (estoy usando la clase Bootstrap Hide):

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

Guion:

$('.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 usted permite html En las opciones que puedes pasar jQuery Objeto 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á a Unwrap Content Data
• si html no se permite que los datos de contenido se aplicarán como texto
• si html Los datos permitidos y de contenido se aplicarán como 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 6

¡Todas estas respuestas pierden un aspecto muy importante!

Mediante el uso de .html o innerhtml o externo, en realidad no está usando el elemento referenciado. Está utilizando una copia del HTML del elemento. Esto tiene algunos retiros serios.

1. No puede usar ningún IDS porque las ID serán duplicadas.
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();


});

Answer 7

¿Por qué tan complicado? Solo pon esto:

data-html='true'

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>