เป็นไปได้ไหมที่จะใช้ div เป็นเนื้อหาสำหรับ Popover ของ Twitter

ฉันใช้ popover ของบูตของ Twitter ที่นี่ ตอนนี้เมื่อฉันเลื่อนข้อความ popover ที่ popover ปรากฏขึ้นพร้อมกับเพียงข้อความจาก<a>'s data-contentแอตทริบิวต์ ฉันสงสัยว่าถ้ามีอยู่แล้วที่จะนำ<div>ภายใน popover อาจเป็นไปได้ว่าฉันต้องการใช้ php และ mysql ในนั้น แต่ถ้าฉันสามารถทำให้ div ทำงานได้ฉันคิดว่าฉันสามารถหาส่วนที่เหลือได้ ฉันลองตั้งค่า data-content เป็นdivID แต่มันใช้งานไม่ได้

HTML:

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

ก่อนอื่นถ้าคุณต้องการใช้ HTML ภายในเนื้อหาที่คุณต้องตั้งค่าตัวเลือก HTML เป็นจริง:

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

จากนั้นคุณมีสองตัวเลือกในการตั้งค่าเนื้อหาสำหรับ Popover

• ใช้แอตทริบิวต์ data-content นี่คือตัวเลือกเริ่มต้น
• ใช้ฟังก์ชัน JS ที่กำหนดเองซึ่งส่งคืนเนื้อหา HTML

ใช้ข้อมูลเนื้อหา : คุณต้องหลบหนีเนื้อหา HTML บางสิ่งเช่นนี้:

<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 ด้วยตนเองหรือใช้ฟังก์ชั่น ฉันไม่รู้เกี่ยวกับ PHP แต่ใน Rails เราใช้ * html_safe *

การใช้ฟังก์ชั่น JS : หากคุณทำเช่นนี้คุณมีหลายทางเลือก ฉันคิดว่าวิธีที่ง่ายที่สุดคือทำให้เนื้อหา div ของคุณถูกซ่อนอยู่ทุกที่ที่คุณต้องการ บางสิ่งเช่นนี้

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

แล้ว HTML ของคุณจะเป็นดังนี้:

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

หวังว่ามันจะช่วย!

PS: ฉันมีปัญหาบางอย่างเมื่อใช้ popover และไม่ได้ตั้งค่าแอตทริบิวต์ title ... ดังนั้นอย่าลืมตั้งชื่อเสมอ

จากคำตอบของjäviสิ่งนี้สามารถทำได้โดยไม่ต้องมี ID หรือคุณสมบัติของปุ่มเพิ่มเติมเช่นนี้:

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

อีกวิธีการหนึ่งหากคุณต้องการมีรูปลักษณ์และความรู้สึกที่โดดเด่น ต่อไปนี้เป็นวิธีการ นอกหลักสูตรนี้เป็นคู่มือ แต่ก็สามารถใช้งานได้ดี :)

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 - ป๊อปโอเวอร์

<div class="bgform popover fade bottom in">
            <div class="arrow"></div>
             ..... your code here .......
</div>

JS

$("#bg").click(function(){
        $('.bgform').slideToggle();
});

ไปงานเลี้ยงสาย การสร้างโซลูชันอื่น ๆ ผมจำเป็นต้องมีวิธีที่จะผ่าน DIV เป้าหมายเป็นตัวแปร นี่คือสิ่งที่ฉันทำ

HTML สำหรับแหล่ง Popover (เพิ่ม data data-popที่จะเก็บค่าสำหรับ DIV id / หรือคลาสปลายทาง):

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

HTML สำหรับเนื้อหา Popover (ฉันใช้คลาส bootstrap hide):

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

สคริปต์:

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

นอกจากคำตอบอื่น ๆ หากคุณอนุญาตhtmlในตัวเลือกที่คุณสามารถส่งต่อjQueryวัตถุไปยังเนื้อหาและมันจะถูกผนวกเข้ากับเนื้อหาของ popover ที่มีกิจกรรมและการผูกทั้งหมด นี่คือตรรกะจากซอร์สโค้ด:

• หากคุณผ่านฟังก์ชั่นมันจะถูกเรียกให้แกะข้อมูลเนื้อหา
• หากhtmlไม่ได้รับอนุญาตข้อมูลเนื้อหาจะถูกนำไปใช้เป็นข้อความ
• ถ้าhtmlได้รับอนุญาตและข้อมูลเนื้อหาเป็นสตริงมันจะถูกนำไปใช้เป็นhtml
• มิฉะนั้นข้อมูลเนื้อหาจะถูกผนวกเข้ากับคอนเทนเนอร์เนื้อหาของ popover

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

คำตอบทั้งหมดเหล่านี้พลาดสิ่งสำคัญมาก!

โดยใช้. html หรือ innerHtml หรือ outerHtml คุณจะไม่ได้ใช้องค์ประกอบที่อ้างอิง คุณกำลังใช้สำเนา html ขององค์ประกอบ สิ่งนี้มีแรงดึงที่ร้ายแรง

1. คุณไม่สามารถใช้รหัสใด ๆ ได้เนื่องจากรหัสจะถูกทำซ้ำ
2. หากคุณโหลดเนื้อหาทุกครั้งที่มีการแสดงป๊อปอัปคุณจะสูญเสียข้อมูลทั้งหมดของผู้ใช้

สิ่งที่คุณต้องการทำคือโหลดวัตถุเองลงในป๊อปโอเวอร์

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


});

ทำไมจึงซับซ้อน เพียงแค่ใส่สิ่งนี้:

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>