Apakah mungkin menggunakan div sebagai konten untuk Popover Twitter

Saya menggunakan popover bootstrap twitter di sini . Sekarang, ketika saya gulir atas teks popover popover muncul dengan hanya teks dari <a>'s data-contentatribut. Saya bertanya-tanya apakah ada cara untuk memasukkan <div>popover ke dalam. Secara potensial, saya ingin menggunakan php dan mysql di sana, tetapi jika saya bisa mendapatkan div untuk bekerja saya pikir saya bisa mencari tahu sisanya. Saya mencoba mengatur data-konten ke divID, tetapi tidak berhasil.

HTML:

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

Pertama-tama, jika Anda ingin menggunakan HTML di dalam konten, Anda perlu mengatur opsi HTML menjadi true:

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

Kemudian Anda memiliki dua opsi untuk mengatur konten untuk Popover

• Gunakan atribut data-konten. Ini adalah opsi default.
• Gunakan fungsi JS khusus yang mengembalikan konten HTML.

Menggunakan data-konten : Anda harus keluar dari konten HTML, sesuatu seperti ini:

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

Anda bisa keluar dari HTML secara manual atau menggunakan fungsi. Saya tidak tahu tentang PHP tetapi di Rails kami menggunakan * html_safe *.

Menggunakan fungsi JS : Jika Anda melakukan ini, Anda memiliki beberapa opsi. Yang paling mudah menurut saya adalah meletakkan konten div Anda disembunyikan di mana pun Anda inginkan dan kemudian menulis fungsi untuk meneruskan kontennya ke popover. Sesuatu seperti ini:

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

Dan HTML Anda terlihat seperti ini:

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

Semoga ini bisa membantu!

PS: Saya mengalami beberapa masalah saat menggunakan popover dan tidak mengatur atribut title ... jadi, ingatlah untuk selalu mengatur judul.

Berdasarkan jawaban jävi, ini dapat dilakukan tanpa ID atau atribut tombol tambahan seperti ini:

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

Metode alternatif lain jika Anda ingin memiliki tampilan dan nuansa pop-up. Berikut ini adalah metodenya. Offcourse ini adalah hal manual, tapi bisa diterapkan :)

HTML - tombol

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

Terlambat ke pesta. Membangun solusi lain. Saya membutuhkan cara untuk lulus target DIV sebagai variabel . Inilah yang saya lakukan.

HTML untuk sumber Popover (menambahkan atribut data data-pop yang akan menyimpan nilai untuk id / atau kelas DIV tujuan):

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

HTML untuk konten Popover (saya menggunakan kelas menyembunyikan bootstrap):

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

Naskah:

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

Selain balasan lainnya. Jika Anda mengizinkan htmldalam opsi, Anda dapat meneruskan jQueryobjek ke konten, dan itu akan ditambahkan ke konten popover dengan semua acara dan binding. Berikut ini logika dari kode sumber:

• jika Anda melewati suatu fungsi itu akan dipanggil untuk membuka data konten
• jika htmltidak diizinkan data konten akan diterapkan sebagai teks
• jika htmldiizinkan dan data konten adalah string, itu akan diterapkan sebagaihtml
• jika tidak, data konten akan ditambahkan ke wadah konten popover

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

Semua jawaban ini kehilangan aspek yang sangat penting!

Dengan menggunakan .html atau innerHtml atau outerHtml Anda sebenarnya tidak menggunakan elemen yang dirujuk. Anda menggunakan salinan html elemen. Ini memiliki beberapa kelemahan serius.

1. Anda tidak dapat menggunakan id apa pun karena id akan digandakan.
2. Jika Anda memuat konten setiap kali popover ditampilkan, Anda akan kehilangan semua input pengguna.

Yang ingin Anda lakukan adalah memuat objek itu sendiri ke 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();


});

Kenapa begitu rumit? letakkan ini:

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>