web-dev-qa-db-ja.com

Twitter Bootstrap popover内の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>
htmltwitter-bootstrappopover
250
Adrian Mojica

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

JavaScript： 

$(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-toggleタグとtitleタグからポップアップの内容を読みたくない場合は（または傾けないでください）。あなたはまた使用することができます。隠しdivともう少しJavaScript。これはexampleです。

乾杯。

327
Mauno Vähä

あなたは属性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>
258
Dennis Knochenwefel

ポップオーバーコンテンツを再利用可能な方法で指定するもう1つの方法は、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();
        }
    });
});

Popoverに配置するHTMLがたくさんある場合に便利です。

これがフィドルの例です： http://jsfiddle.net/z824fn6b/ /

89
Jack

Htmlオプションを有効にしたpopoverインスタンスを作成する必要があります（これをjavascriptファイルのpopover JSコードの後に​​配置します）。

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

76
Mike Lucid

私はリストの中でポップオーバーを使いました、私は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>'>
21
user3319310

これは ジャックの優秀な答え についてのわずかな修正です。

以下は、HTMLコンテンツのない単純なポップオーバーが影響を受けないことを確認します。

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

私は本当に長い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});
4
user1079877

リンクポップオーバーにdata-html="true"を入れるだけです。働くつもりです。

3
Tiago Piovesan

これは古い質問ですが、これは別の方法です。ポップオーバーを再利用し、元のブートストラップデータ属性を使用して意味をより明確にするために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/ /

3
Tom Sarduy

ファイル 'ui-bootstrap-tpls-0.11.0.js'の 'template/popover/popover.html'を変更することができます。

それはHTMLですべてのポップオーバーを表示します。 *危険なHTML HTMLを信頼している場合にのみ使用してください。

2
Guy Biber

ポップオーバーイベントを使用し、属性 '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>
0
Vĩnh Phú Ngô