É possível usar uma div como conteúdo para o Popover do Twitter

Estou usando o popover do bootstrap do twitter aqui . Agora, quando eu rolar sobre o texto popover um popover aparece com o texto apenas a partir do <a>'s data-contentatributo. Fiquei me perguntando se havia alguma maneira de colocar um <div>dentro da popover. Potencialmente, eu gostaria de usar php e mysql lá, mas se eu conseguisse fazer com que uma div funcionasse, acho que posso descobrir o resto. Tentei definir o conteúdo dos dados como um divID, mas não funcionou.

HTML:

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

Primeiro de tudo, se você deseja usar HTML dentro do conteúdo, defina a opção HTML como true:

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

Então você tem duas opções para definir o conteúdo para uma Popover

• Use o atributo data-content. Esta é a opção padrão.
• Use uma função JS customizada que retorne o conteúdo HTML.

Usando conteúdo de dados : você precisa escapar do conteúdo HTML, algo como isto:

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

Você pode escapar do HTML manualmente ou usar uma função. Eu não sei sobre PHP, mas no Rails usamos * html_safe *.

Usando uma função JS : Se você fizer isso, terá várias opções. O mais fácil, eu acho, é ocultar o conteúdo div onde você quiser e, em seguida, escrever uma função para passar o conteúdo para popover. Algo assim:

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

E então seu HTML fica assim:

<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 ajude!

PS: Eu tive alguns problemas ao usar o popover e não definir o atributo title ... então, lembre-se de sempre definir o título.

Com base na resposta da jävi, isso pode ser feito sem IDs ou atributos adicionais de botões 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();
    }
});

Outro método alternativo, se você deseja apenas ter a aparência de pop over. A seguir está o método Offcourse isso é uma coisa manual, mas bem viável :)

Botão HTML -

<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 para a festa. Construindo as outras soluções. Eu precisava de uma maneira de passar o DIV de destino como uma variável . Aqui está o que eu fiz.

HTML para a fonte Popover (adicionado um atributo de dados data-pop que conterá o valor para o ID / classe DIV de destino):

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

HTML para conteúdo Popover (estou usando a classe de ocultação de autoinicialização):

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

Roteiro:

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

Além de outras respostas. Se você permitir as htmlopções, poderá passar o jQueryobjeto para o conteúdo, que será anexado ao conteúdo do popover com todos os eventos e ligações. Aqui está a lógica do código fonte:

• se você passar uma função, ela será chamada para desembrulhar os dados do conteúdo
• se htmlnão for permitido, os dados do conteúdo serão aplicados como texto
• se htmlpermitido e os dados do conteúdo forem string, eles serão aplicados comohtml
• caso contrário, os dados do conteúdo serão anexados ao contêiner de popover

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

Todas essas respostas perdem um aspecto muito importante!

Usando .html ou innerHtml ou outerHtml, você não está realmente usando o elemento referenciado. Você está usando uma cópia do html do elemento. Isso tem algumas desvantagens sérias.

1. Você não pode usar nenhum ID porque os IDs serão duplicados.
2. Se você carregar o conteúdo toda vez que a popover for exibida, você perderá toda a entrada do usuário.

O que você quer fazer é carregar o próprio objeto na 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 que tão complicado? basta colocar isso:

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>