Twitter Bootstrap popover içindeki HTML

Bir bootstrap popover içinde HTML görüntülemek için çalışıyorum, ama bir şekilde çalışmıyor. Burada bazı cevaplar buldum ama benim için işe yaramayacak. Yanlış bir şey yapıp yapmadığımı lütfen bize bildirin.

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

Ona <li href="#"ait olduğu için kullanamazsınız, bu <a href="#"yüzden işe yaramıyordu, değiştiriyor ve hepsi iyi.

İşte size bootstrap popover oluşturmayı gösteren JSFiddle çalışıyor .

Kodun ilgili bölümleri aşağıdadır:

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

Ve bu arada, her zaman en azından $("[data-toggle=popover]").popover();popover'ı etkinleştirmeniz gerekir. Ama yerine ya data-toggle="popover"da kullanabilirsiniz . Bunları örneğin: kullanarak etkinleştirmeyi unutmayın .id="my-popover"class="my-popover"$("#my-popover").popover();

İşte tüm spec bağlantısı: Bootstrap Popover

Bonus:

Herhangi bir nedenden dolayı data-toggleve titleetiketlerinden bir pop-up içeriğini beğenmezseniz veya okuyamazsanız . Örneğin gizli div'ler ve biraz daha fazla JavaScript kullanabilirsiniz. İşte bununla ilgili bir örnek .

şu özelliği kullanabilirsiniz 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>

Popover içeriğini yeniden kullanılabilir bir şekilde belirtmenin başka bir yolu, yeni bir veri özelliği oluşturmak data-popover-contentve bu şekilde kullanmaktır:

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

Bu, popovers'ınıza yerleştirmek için çok fazla html'niz olduğunda yararlı olabilir.

İşte bir örnek keman: http://jsfiddle.net/z824fn6b/

Html seçeneği etkin olan bir popover örneği oluşturmanız gerekir (bunu, popover JS kodundan sonra javascript dosyanıza yerleştirin):

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

Listenin içinde bir pop kullandım, HTML ile örnek veriyorum

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

Sadece data-html="true"bağlantı popover koymak gerekir . Çalışacak.

Bu, Jack'in mükemmel cevabında küçük bir değişikliktir .

Aşağıdakiler, HTML içeriği olmayan basit popover'ların etkilenmemesini sağlar.

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

Özniteliğin içine uzun HTML koymaktan nefret ediyorum, işte benim çözümüm, açık ve basit (değiştir? İstediğinizle):

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

sonra

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

Bu eski bir sorudur, ancak bu, popover'ı yeniden kullanmak ve daha anlamsal hale getirmek için orijinal önyükleme veri özelliklerini kullanmaya devam etmek için jQuery'yi kullanmanın başka bir yoludur:

Bağlantı

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

Gösterilecek özel içerik

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

Tam örnekle uğraşın : http://jsfiddle.net/tomsarduy/262w45L5/

'Ui-bootstrap-tpls-0.11.0.js' dosyasındaki 'template / popover / popover.html' dosyasını değiştirebilirsiniz: Yazma: "ng-bind" yerine "bind-html-unsafe"

Html ile tüm popover gösterecektir. * güvenli olmayan html. Yalnızca html'ye güveniyorsanız kullanın.

Popover olayını kullanabilir ve genişliği 'veri genişliği' özelliğine göre kontrol edebilirsiniz

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

Bunu popper.js dosyanızın altına ekleyin:

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

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