È possibile utilizzare un div come contenuto per Popover di Twitter

Question

Sto usando il popover di bootstrap di twitter here. In questo momento, quando sfoglio il testo popover, viene visualizzato un popover con solo il testo dall'attributo <a>data-content. Mi stavo chiedendo se ci fosse comunque da mettere un <div> all'interno del popover. Potenzialmente, mi piacerebbe usare php e mysql lì, ma se potessi ottenere un div al lavoro penso di poter capire il resto. Ho provato a impostare il contenuto dei dati su un ID div, ma non ha funzionato.

HTML:

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

Answer 1

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

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

allora hai due opzioni per impostare il contenuto di un Popover

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

Utilizzando i dati contenuti-: Hai bisogno di fuggire il contenuto HTML, qualcosa di simile:

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

è possibile sfuggire il codice HTML manualmente o utilizzare una funzione. Non conosco PHP ma in Rails usiamo * html_safe *.

Utilizzo di una funzione JS: Se si esegue questa operazione, sono disponibili diverse opzioni. Il modo più semplice è quello di mettere il tuo contenuto div nascosto dove vuoi e poi scrivere una funzione per passare il suo contenuto al popover. Qualcosa di simile a questo:

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

E poi il codice HTML simile a questo:

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

Speranza che aiuta!

PS: ho avuto qualche problema quando utilizzo popover e non ho impostato l'attributo title ... quindi, ricordati di impostare sempre il titolo.

Answer 2

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

HTML - pulsante

<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

Sulla risposta di Javi, questo può essere eseguito senza ID o attributi di pulsanti 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(); 
    } 
}); 

Answer 4

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

HTML per fonte Popover (aggiunto un attributo di dati dati-pop che conterrà il valore per destinazione div id/o classe):

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

HTML per i contenuti Popover (io sono utilizzando nascondere classe di 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(); 
}}); 

Answer 5

In aggiunta alle altre risposte. Se si consente html in opzioni, è possibile passare l'oggetto jQuery 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 che sarà chiamato a scartare i dati contenuti
• se html non è permesso i dati contenuti verranno applicati come testo
• se html ammessi e contenuti dati è la stringa verrà applicato come html
• dati altrimenti contenuti saranno aggiunti contenitore contenuti 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

Perché così complicato? basta mettere questo:

data-html='true' 

Answer 8

Tutte queste risposte manca un aspetto molto importante!

Utilizzando .html o innerHtml o outerHtml in realtà non si utilizza l'elemento di riferimento. Stai utilizzando una copia dell'HTML dell'elemento. Questo ha alcuni seri arretramenti.

1. Non è possibile utilizzare alcun ID perché gli ID verranno duplicati.
2. Se caricate il contenuto ogni volta che viene mostrato il popover, perderete 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(); 


});