Twitter 부트 스트랩 팝 오버 내의 HTML

부트 스트랩 팝 오버 안에 HTML을 표시하려고하는데 어떻게 든 작동하지 않습니다. 나는 여기에 몇 가지 답변을 찾았지만 나에게는 효과가 없다. 내가 뭘 잘못하고 있는지 알려주세요.

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

그것이 작동하지 않았기 <li href="#"때문에 그것을 사용할 수 없으므로 <a href="#"변경하고 모든 것이 좋습니다.

부트 스트랩 팝 오버를 생성하는 방법을 보여주는 JSFiddle 이 작동 합니다.

코드의 관련 부분은 다음과 같습니다.

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>

자바 스크립트 :

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

$("[data-toggle=popover]").popover();그건 그렇고, 적어도 팝 오버를 활성화 하려면 항상 필요합니다 . 그러나 대신에 또는 data-toggle="popover"을 사용할 수도 있습니다 . 예를 들어 다음 을 사용하여 활성화하십시오 .id="my-popover"class="my-popover"$("#my-popover").popover();

전체 사양에 대한 링크는 다음과 같습니다. Bootstrap Popover

보너스:

어떤 이유로 data-toggleand 및 title태그 에서 팝업 내용을 좋아하지 않거나 읽을 수없는 경우 . 숨겨진 div 및 조금 더 JavaScript를 사용할 수도 있습니다. 여기에 대한 예가 있습니다.

속성을 사용할 수 있습니다 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>

재사용 가능한 방식으로 팝 오버 컨텐츠를 지정하는 다른 방법은 다음과 같이 새 데이터 속성을 작성하고 data-popover-content다음과 같이 사용하는 것입니다.

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

팝 오버에 배치 할 HTML이 많은 경우에 유용 할 수 있습니다.

다음은 바이올린의 예입니다. http://jsfiddle.net/z824fn6b/

html 옵션이 활성화 된 팝 오버 인스턴스를 만들어야합니다 (팝 오버 JS 코드 다음에 자바 스크립트 파일에 배치).

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

목록 내에서 팝업을 사용하여 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>'>

data-html="true"링크 팝 오버 만 입력 하면됩니다. 작동합니다.

이것은 Jack의 탁월한 답변 에 약간의 수정입니다 .

다음은 HTML 컨텐츠가없는 간단한 팝 오버가 영향을받지 않도록합니다.

자바 스크립트 :

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

나는 속성 안에 긴 HTML을 넣는 것을 정말로 싫어합니다. 여기에 내 솔루션이 명확하고 간단합니다 (? 원하는대로 바꾸십시오).

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

그때

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

이것은 오래된 질문이지만 jQuery를 사용하여 팝 오버를 재사용하고 원래 부트 스트랩 데이터 속성을 사용하여 더 의미 적으로 만들 수있는 또 다른 방법입니다.

링크

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

표시 할 맞춤 콘텐츠

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

자바 스크립트

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

완전한 예제가있는 바이올린 : http://jsfiddle.net/tomsarduy/262w45L5/

'ui-bootstrap-tpls-0.11.0.js'파일에서 'template / popover / popover.html'을 변경할 수 있습니다. 쓰기 : "ng-bind"대신 "bind-html-unsafe"

모든 팝 오버가 html로 표시됩니다. 안전하지 않은 HTML입니다. html을 신뢰하는 경우에만 사용하십시오.

popover 이벤트를 사용하고 '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>

popper.js 파일의 맨 아래에 이것을 추가하십시오 :

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

출처 : https://github.com/twbs/bootstrap/issues/23590