Bir div'ı Twitter'ın Popover'ı için içerik olarak kullanmak mümkün müdür?

Burada twitter bootstrap popover kullanıyorum . Şu anda, popover metninin üzerine geldiğimde, <a>' data-contentözniteliğinden yalnızca metin içeren bir popover beliriyor . <div>Popover içine koymak için yine de olup olmadığını merak ediyordum . Potansiyel olarak, orada php ve mysql kullanmak istiyorum, ama eğer çalışmak için bir div alabilir eğer ben geri kalanı anlayabiliyorum düşünüyorum. Bir divkimliğe veri içeriği ayarlamayı denedim , ancak işe yaramadı.

HTML:

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

Her şeyden önce, içeriğin içinde HTML kullanmak istiyorsanız, HTML seçeneğini true olarak ayarlamanız gerekir:

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

Sonra bir Popover için içeriği ayarlamak için iki seçeneğiniz vardır

• Veri-içerik özelliğini kullanın. Bu varsayılan seçenektir.
• HTML içeriğini döndüren özel bir JS işlevi kullanın.

Veri içeriğini kullanma : Aşağıdaki gibi HTML içeriğinden kaçmanız gerekir:

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

HTML'den elle kaçabilir veya bir işlev kullanabilirsiniz. PHP hakkında bilmiyorum ama Rails biz * html_safe * kullanın.

JS işlevini kullanma : Bunu yaparsanız, birkaç seçeneğiniz vardır. Sanırım en kolayı div içeriğinizi istediğiniz yere gizlemek ve ardından içeriğini popover'a geçirmek için bir işlev yazmaktır. Bunun gibi bir şey:

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

Ve sonra HTML'niz şöyle görünür:

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

Umarım yardımcı olur!

Not: popover kullanırken ve başlık özniteliğini ayarlamada bazı sorunlar yaşadım ... bu yüzden, başlığı her zaman ayarlamayı unutmayın.

Jävi'nin cevabına dayanarak, bu kimlikler veya bunun gibi ek düğme özellikleri olmadan yapılabilir:

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

Başka bir alternatif yöntem sadece pop-up bakmak ve hissetmek istiyorsanız. Aşağıdaki yöntem. Bu manuel bir şey, ama güzel uygulanabilir :)

HTML - düğmesi

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

Partiye geç. Diğer çözümleri oluşturmak. Hedef DIV'yi değişken olarak geçirmenin bir yoluna ihtiyacım vardı . İşte yaptığım şey.

Popover kaynağı için HTML kaynağı ( hedef DIV kimliği / veya sınıfı için değeri tutacak bir veri özelliği data-pop eklendi ):

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

Popover içeriği için HTML (bootstrap hide class kullanıyorum):

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

Senaryo:

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

Diğer yanıtlara ek olarak. htmlSeçeneklerde izin verirseniz jQuerynesneyi içeriğe aktarabilirsiniz ve tüm etkinlik ve bağlarla popover'ın içeriğine eklenir. Kaynak koddaki mantık şöyledir:

• bir işlev iletirseniz içerik verilerini açmak için çağrılır
• eğer htmlizin verilmez içerik veri metin olarak uygulanacaktır
• eğer htmlizin ve içerik verileri o kadar uygulanacak dizedirhtml
• aksi takdirde içerik verileri popover'ın içerik kapsayıcısına eklenir

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

Tüm bu cevaplar çok önemli bir yönü kaçırıyor!

.Html veya innerHtml veya externalHtml kullanarak, başvurulan öğeyi kullanmıyorsunuzdur. Öğenin html'sinin bir kopyasını kullanıyorsunuz. Bunun ciddi bir dezavantajı var.

1. Kimlikler çoğaltılamaz çünkü kimlikler çoğaltılacaktır.
2. İçeriği popover her gösterildiğinde yüklerseniz, kullanıcının tüm girişlerini kaybedersiniz.

Yapmak istediğiniz şey, nesnenin kendisini popover'a yüklemektir.

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


});

Neden bu kadar karmaşık? sadece şunu koy:

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>