HTML di dalam popover Bootstrap Twitter

Saya mencoba untuk menampilkan HTML di dalam popover bootstrap, tetapi entah bagaimana itu tidak berfungsi. Saya menemukan beberapa jawaban di sini tetapi tidak akan berhasil untuk saya. Tolong beri tahu saya jika saya melakukan sesuatu yang salah.

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

Anda tidak dapat menggunakan <li href="#"karena itu milik <a href="#"mengapa itu tidak bekerja, mengubahnya dan itu semua baik.

Inilah JSFiddle yang berfungsi yang menunjukkan cara membuat bootstrap popover.

Bagian yang relevan dari kode di bawah ini:

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

Omong-omong, Anda selalu membutuhkan setidaknya $("[data-toggle=popover]").popover();untuk mengaktifkan popover. Tapi di tempat data-toggle="popover"Anda juga bisa menggunakan id="my-popover"atau class="my-popover". Ingatlah untuk mengaktifkannya menggunakan mis: $("#my-popover").popover();dalam kasus tersebut.

Berikut ini tautan ke spesifikasi lengkap: Bootstrap Popover

Bonus:

Jika karena alasan tertentu Anda tidak suka atau tidak bisa membaca konten sembulan dari tag data-toggledan title. Anda juga dapat menggunakan mis. Div tersembunyi dan sedikit lebih JavaScript. Berikut ini contohnya .

Anda dapat menggunakan atribut 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>

Cara lain untuk menentukan konten popover dengan cara yang dapat digunakan kembali adalah dengan membuat atribut data baru seperti data-popover-contentdan menggunakannya seperti ini:

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

Ini dapat bermanfaat ketika Anda memiliki banyak html untuk ditempatkan di popovers Anda.

Berikut adalah contoh biola: http://jsfiddle.net/z824fn6b/

Anda perlu membuat instance popover yang mengaktifkan opsi html (tempatkan ini di file javascript Anda setelah kode JS popover):

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

Saya menggunakan pop di dalam daftar, saya memberi contoh melalui 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>'>

Anda hanya perlu memasukkan data-html="true"tautan popover. Apakah akan berhasil?

Ini sedikit modifikasi pada jawaban Jack yang luar biasa .

Berikut ini memastikan popover sederhana, tanpa konten HTML, tetap tidak terpengaruh.

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

Saya benar-benar benci untuk meletakkan HTML yang panjang di dalam atribut, ini solusinya, jelas dan sederhana (ganti? Dengan apa pun yang Anda inginkan):

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

kemudian

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

Ini adalah pertanyaan lama, tetapi ini adalah cara lain, menggunakan jQuery untuk menggunakan kembali popover dan tetap menggunakan atribut data bootstrap asli untuk membuatnya lebih semantik:

Tautannya

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

Konten khusus untuk ditampilkan

<!-- 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 dengan contoh lengkap: http://jsfiddle.net/tomsarduy/262w45L5/

Anda dapat mengubah 'template / popover / popover.html' di file 'ui-bootstrap-tpls-0.11.0.js' Tulis: "bind-html-tidak aman" alih-alih "ng-bind"

Ini akan menampilkan semua popover dengan html. * html tidak aman. Gunakan hanya jika Anda mempercayai html.

Anda dapat menggunakan acara sembulan, dan mengontrol lebar dengan atribut 'data-width'

$('[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>

Tambahkan ini ke bagian bawah file popper.js Anda:

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

Sumber: https://github.com/twbs/bootstrap/issues/23590