HTML bên trong Twitter Bootstrap popover

Tôi đang cố gắng hiển thị HTML bên trong một popover bootstrap, nhưng bằng cách nào đó nó không hoạt động. Tôi tìm thấy một số câu trả lời ở đây nhưng nó sẽ không làm việc cho tôi. Xin vui lòng cho tôi biết nếu tôi làm điều gì sai.

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>

Bạn không thể sử dụng <li href="#"vì nó thuộc về <a href="#"lý do tại sao nó không hoạt động, thay đổi nó và tất cả đều tốt.

Ở đây đang làm việc với JSFiddle , nó chỉ cho bạn cách tạo popover bootstrap.

Các phần có liên quan của mã dưới đây:

HTML:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScript:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

Và nhân tiện, bạn luôn cần ít nhất là $("[data-toggle=popover]").popover();để bật popover. Nhưng ở chỗ data-toggle="popover"bạn cũng có thể sử dụng id="my-popover"hoặc class="my-popover". Chỉ cần nhớ kích hoạt chúng bằng cách sử dụng, ví dụ: $("#my-popover").popover();trong những trường hợp đó.

Đây là liên kết đến thông số đầy đủ: Bootstrap Popover

Tặng kem:

Nếu vì lý do nào đó bạn không thích hoặc không thể đọc nội dung của cửa sổ bật lên từ data-togglevà titlethẻ. Bạn cũng có thể sử dụng ví dụ div ẩn và thêm một chút JavaScript. Dưới đây là một ví dụ về điều đó.

bạn có thể sử dụng thuộc tính data-html="true":

<a href="#" id="example"  rel="popover" 
    data-content="<div>This <b>is</b> your div content</div>" 
    data-html="true" data-original-title="A Title">popover</a>

Một cách khác để xác định nội dung popover theo cách có thể sử dụng lại là tạo một thuộc tính dữ liệu mới như thế nào data-popover-contentvà sử dụng nó như thế này:

HTML:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

JS:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

Điều này có thể hữu ích khi bạn có rất nhiều html để đặt vào cửa sổ bật lên của mình.

Dưới đây là một ví dụ fiddle: http://jsfiddle.net/z824fn6b/

Bạn cần tạo một cá thể popover có bật tùy chọn html (đặt cái này vào tệp javascript của bạn sau mã JS popover):

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

Tôi đã sử dụng một cửa sổ bật lên trong danh sách, Tôi đưa ra một ví dụ qua HTML

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>

Bạn chỉ cần đặt data-html="true"trong liên kết popover. Sẽ làm việc.

Đây là một sửa đổi nhỏ trên câu trả lời tuyệt vời của Jack .

Phần sau đây đảm bảo các popovers đơn giản, không có nội dung HTML, vẫn không bị ảnh hưởng.

JavaScript:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

Tôi thực sự ghét đặt HTML dài bên trong thuộc tính, đây là giải pháp của tôi, rõ ràng và đơn giản (thay thế? Bằng bất cứ điều gì bạn muốn):

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

sau đó

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});

Đây là một câu hỏi cũ, nhưng đây là một cách khác, sử dụng jQuery để sử dụng lại popover và tiếp tục sử dụng các thuộc tính dữ liệu bootstrap ban đầu để làm cho nó có ngữ nghĩa hơn:

Liên kết

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

Nội dung tùy chỉnh để hiển thị

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Javascript

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

Fiddle với ví dụ đầy đủ: http://jsfiddle.net/tomsarduy/262w45L5/

Bạn có thể thay đổi 'template / popover / popover.html' trong tệp 'ui-bootstrap-tpls-0.11.0.js' Viết: "bind-html-không an toàn" thay vì "ng-bind"

Nó sẽ hiển thị tất cả popover với html. * html không an toàn của nó. Chỉ sử dụng nếu bạn tin tưởng html.

Bạn có thể sử dụng sự kiện popover và kiểm soát độ rộng theo thuộc tính 'chiều rộng dữ liệu'

$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
    var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
    $("div[id^=popover]").css("max-width", width);
});

 <a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
 <i class="far fa-question-circle"></i>
 </a>

Thêm phần này vào cuối tệp popper.js của bạn:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

Nguồn: https://github.com/twbs/bootstrap/issues/23590