È possibile utilizzare un div come contenuto per Popover di Twitter

Sto usando il popover del bootstrap di Twitter qui . In questo momento, quando ho scorrere sul testo popover un popover appare con solo testo dal <a>'s data-contentattributo. Mi chiedevo se ci fosse comunque <div>qualcosa da mettere dentro il popover. Potenzialmente, vorrei usare php e mysql, ma se potessi far funzionare un div penso che potrei capire il resto. Ho provato a impostare il contenuto dei dati su un divID, ma non ha funzionato.

HTML:

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

Prima di tutto, se si desidera utilizzare HTML all'interno del contenuto, è necessario impostare l'opzione HTML su true:

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

Quindi hai due opzioni per impostare il contenuto per un Popover

• Utilizzare l'attributo contenuto-dati. Questa è l'opzione predefinita.
• Utilizzare una funzione JS personalizzata che restituisce il contenuto HTML.

Utilizzo del contenuto dei dati : è necessario sfuggire al contenuto HTML, in questo modo:

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

Puoi uscire manualmente dall'HTML o utilizzare una funzione. Non conosco PHP ma in Rails usiamo * html_safe *.

Utilizzo di una funzione JS : se lo fai, hai diverse opzioni. Penso che la cosa più semplice sia quella di nascondere il contenuto div ovunque tu voglia e quindi scrivere una funzione per passare il suo contenuto a popover. Qualcosa come questo:

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

E quindi il tuo HTML appare così:

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

Spero che sia d'aiuto!

PS: ho avuto dei problemi quando si utilizza popover e non si imposta l'attributo title ... quindi, ricorda di impostare sempre il titolo.

Basandosi sulla risposta di jävi, questo può essere fatto senza ID o attributi di pulsante aggiuntivi come questo:

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

Un altro metodo alternativo se si desidera semplicemente avere l'aspetto e il pop-up. Di seguito è riportato il metodo. Offcourse è una cosa manuale, ma ben fattibile :)

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

In ritardo alla festa. Costruire le altre soluzioni. Avevo bisogno di un modo per passare il DIV target come variabile . Ecco cosa ho fatto.

HTML per sorgente Popover (aggiunto un pop- data di attributo di dati che conterrà valore per ID / classe DIV di destinazione):

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

HTML per contenuti Popover (sto usando la classe hide bootstrap):

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

script:

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

Oltre ad altre risposte. Se si consentono le htmlopzioni, è possibile passare l' jQueryoggetto al contenuto e verrà aggiunto al contenuto del popover con tutti gli eventi e i collegamenti. Ecco la logica dal codice sorgente:

• se si passa una funzione, verrà chiamata per scartare i dati del contenuto
• se htmlnon è consentito, i dati del contenuto verranno applicati come testo
• se htmlconsentito e i dati del contenuto sono stringa, verranno applicati comehtml
• altrimenti i dati di contenuto verranno aggiunti al contenitore di contenuti di popover

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

Tutte queste risposte mancano di un aspetto molto importante!

Utilizzando .html o innerHtml o outerHtml non si utilizza effettivamente l'elemento di riferimento. Stai usando una copia dell'html dell'elemento. Ciò ha alcuni gravi inconvenienti.

1. Non è possibile utilizzare alcun ID perché gli ID verranno duplicati.
2. Se carichi i contenuti ogni volta che viene mostrato il popover, perderai tutto l'input dell'utente.

Quello che vuoi fare è caricare l'oggetto stesso nel 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();


});

Perché così complicato? basta mettere questo:

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>