web-dev-qa-db-ja.com

bootstrap popover？

インターネットで見つけたほとんどの場合、containerは_'body'_に設定されていました

私が遭遇したもの：

ブートストラップポップオーバーは固定divコンテンツに表示され、ページをスクロールするとポップオーバーも移動します。

Paramコンテナーを特定のDIV _#search-filter-container_に変更しましたが、何も変更されていません。

更新：

_.popover_を設定したのに、ついに_container: '#some-my-div'_ DIVがようやく本文内に表示される

_  <div class="popover fade right in" style="top: 429.5px; left: 680px; display: block;">
    code details...
  </div>
</body>
_
javascripttwitter-bootstrappopoverbootstrap-popover
10
hlcfan

特にコード例を提供しなかったため、何を求めているのかを知るのは困難です。お読みください 良い質問をするにはどうすればよいですか？

ただし、コンテナーオプションの使用例を示すために、 JSFiddle を作成しました。

JavaScriptの各行をコメント化して、さまざまな効果を確認します（結果フレームで上下にスクロールします）。コードを変更するときは、必ずRunを押してください。

HTML

<div style="height: 100px;">
    <br />Static text.</div>
<div style="position: fixed; width: 100%;" id="fixed-div">
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." id="popover">Popover</button>
</div>
<div style="height: 2000px;"></div>

JavaScript

// comment this
$('[data-toggle="popover"]').popover({container: "body"});

// uncomment this
//$('[data-toggle="popover"]').popover({container: "#fixed-div"});
14
Rowan Freeman

コンテナー属性でCSSセレクターを使用します。

選択したコンテナがスクロールすると、ポップオーバーもスクロールします。たとえば、オープナーボタンをコンテナとして使用するか、その近くの要素を使用します

[〜＃〜] html [〜＃〜]

<button type="button" class="btn btn-primary" data-container="#popover-button" data-toggle="popover" ... id="popover-button">Open popover</button>
</div>

[〜＃〜] javascript [〜＃〜]

$('#popover-button').popover({container: "#popover-button"});
1
Luca C.