Có thể sử dụng div làm nội dung cho Popover của Twitter không

Tôi đang sử dụng popover bootstrap của twitter ở đây . Ngay bây giờ, khi tôi di chuyển trên văn bản popover một popover xuất hiện chỉ với văn bản từ <a>'s data-contentthuộc tính. Tôi đã tự hỏi nếu có cách nào để đặt một <div>bên trong popover. Có khả năng, tôi muốn sử dụng php và mysql trong đó, nhưng nếu tôi có thể có một div để làm việc, tôi nghĩ rằng tôi có thể tìm ra phần còn lại. Tôi đã thử thiết lập nội dung dữ liệu thành divID, nhưng nó không hoạt động.

HTML:

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

Trước hết, nếu bạn muốn sử dụng HTML bên trong nội dung, bạn cần đặt tùy chọn HTML thành true:

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

Sau đó, bạn có hai tùy chọn để đặt nội dung cho Popover

• Sử dụng thuộc tính nội dung dữ liệu. Đây là tùy chọn mặc định.
• Sử dụng hàm JS tùy chỉnh trả về nội dung HTML.

Sử dụng nội dung dữ liệu : Bạn cần thoát nội dung HTML, đại loại như thế này:

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

Bạn có thể thoát HTML bằng tay hoặc sử dụng một chức năng. Tôi không biết về PHP nhưng trong Rails, chúng tôi sử dụng * html_safe *.

Sử dụng hàm JS : Nếu bạn làm điều này, bạn có một số tùy chọn. Cách đơn giản nhất tôi nghĩ là đặt nội dung div của bạn ẩn bất cứ nơi nào bạn muốn và sau đó viết một hàm để chuyển nội dung của nó sang popover. Một cái gì đó như thế này:

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

Và sau đó HTML của bạn trông như thế này:

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

Hy vọng nó giúp!

Tái bút: Tôi đã gặp một số rắc rối khi sử dụng popover và không đặt thuộc tính tiêu đề ... vì vậy, hãy nhớ luôn đặt tiêu đề.

Dựa trên câu trả lời của jävi, điều này có thể được thực hiện mà không cần ID hoặc các thuộc tính nút bổ sung như thế này:

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

Một phương pháp thay thế khác nếu bạn muốn có giao diện bật lên. Sau đây là phương pháp. Đây là một điều thủ công, nhưng hoàn toàn khả thi :)

HTML - nút

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

Mã não

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

Đi dự tiệc muộn. Xây dựng các giải pháp khác. Tôi cần một cách để vượt qua DIV mục tiêu như một biến . Đây là những gì tôi đã làm.

HTML cho nguồn Popover (đã thêm một thuộc tính dữ liệu pop-pop sẽ giữ giá trị cho id / hoặc lớp DIV đích):

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

HTML cho nội dung Popover (Tôi đang sử dụng lớp ẩn bootstrap):

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

Kịch bản:

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

Ngoài các trả lời khác. Nếu bạn cho phép htmltrong các tùy chọn, bạn có thể chuyển jQueryđối tượng vào nội dung và nó sẽ được thêm vào nội dung của popover với tất cả các sự kiện và ràng buộc. Đây là logic từ mã nguồn:

• nếu bạn vượt qua một chức năng, nó sẽ được gọi để mở dữ liệu nội dung
• nếu htmlkhông được phép, dữ liệu nội dung sẽ được áp dụng dưới dạng văn bản
• nếu htmlđược phép và dữ liệu nội dung là chuỗi, nó sẽ được áp dụng nhưhtml
• nếu không, dữ liệu nội dung sẽ được thêm vào thùng chứa nội dung của popover

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

Tất cả những câu trả lời này bỏ lỡ một khía cạnh rất quan trọng!

Bằng cách sử dụng .html hoặc InternalHtml hoặc outsHtml, bạn không thực sự sử dụng phần tử được tham chiếu. Bạn đang sử dụng bản sao html của phần tử. Điều này có một số rút lại nghiêm trọng.

1. Bạn không thể sử dụng bất kỳ id nào vì id sẽ được sao chép.
2. Nếu bạn tải nội dung mỗi khi cửa sổ bật lên được hiển thị, bạn sẽ mất tất cả đầu vào của người dùng.

Những gì bạn muốn làm là tải chính đối tượng vào 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();


});

Sao lại phức tạp thế? chỉ cần đặt cái này

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>