130

私はブートストラップサイトで作業しており、2.0からブートストラップ2.2に更新した後、ポップオーバーを除いてすべてが機能しました。

ポップオーバーは引き続き正常に表示されますが、他のすべての要素の上に表示されるわけではありません。

<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
     <div>  //popover shows on top of this
          <div> //popover shows on top of this
               //link here with popover in it.
          </div>
     </div>
</div>

ポップオーバーの動作が変更された理由、またはそれを修正する方法について誰かが知っていますか？ありがとう。

4

16 に答える 16

373

data-container="body"html要素に設定することで問題を解決できました

HTML例： 

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript例：

$('your element').tooltip({ container: 'body' })

このリンクから発見: https://github.com/twitter/bootstrap/issues/5889

于 2013-04-12T22:37:26.900 に答える
26

スクロールが有効になっているDataTables JQueryライブラリが関係する、これに似た状況がありました。

結局のところ、Z インデックスとは何の関係もありませんでしたが、囲んでいる div の 1 つに CSS オーバーフロー プロパティが非表示に設定されていました。

要素にイベントを追加してポップオーバーをトリガーすることで修正しました。これにより、責任のある div のオーバーフロー プロパティも表示に変更されました。

于 2013-04-12T17:01:02.247 に答える
17

最も考えられる原因は、ポップオーバー上に表示されるコンテンツの が高いことですz-index。正確なコード/スタイルがなくても、次の 2 つのオプションを提供できます。

Web インスペクター (通常、お気に入りのブラウザーでは F12 キー) を使用して正確な要素を特定し、実際のz-index.

この値が見つかった場合は、デフォルトのポップオーバーよりも低く設定できますz-index: 1010;

z-indexまたは、それほど良くない他のアプローチは、ポップオーバーのを増やすことです。@zindexPopoverLess ファイルの を使用するか、オーバーライドして直接行うことができます。

.popover {
    z-index: 1010; /* A value higher than 1010 that solves the problem */
}

解決策が見つからない場合は、この jsfiddleなどでバグを再現してみてください。おそらく、バグを取得しようとしている間に問題が解決するでしょう。

于 2012-12-25T03:17:33.373 に答える
12

2 つの固定要素で同様の問題が発生しました。z インデックス階層が正しい場合でも、ブートストラップ ツールチップは、z インデックスが低い 1 つの要素の背後に隠されていました。

追加するdata-container="body"と問題が解決し、期待どおりに機能するようになりました。

于 2014-08-25T08:53:48.037 に答える
9

data-container="body" が機能しない場合は、他の 2 つのプロパティを試してください。

data-container="body" style="z-index:1000; position:relative"

z-index は最大制限でなければなりません。

于 2015-12-19T03:35:14.387 に答える
1 
  $('[data-toggle="popover"]').popover({
        placement: 'top',
        boundary: 'viewport',
        trigger: 'hover',
        html: true,
        content: function () {
            let content = $(this).attr("data-popover-content");
            return $(content).html();
        }
    });,



`placement`: 'top',
`boundary`: 'viewport'
both needed
于 2019-07-15T10:05:22.697 に答える
0

使っているだけ

$().popover({container: 'body'})

コンテナとして body を使用し、より高い z-index を持つ BootstrapDialog モーダル上にポップオーバーを表示する場合は、十分ではない可能性があります。

Bootstrap3 の内部を使用するこの修正が付属しています (2.x / 4.x では動作しない可能性があります) が、最新の Bootstrap インストールのほとんどは 3.x です。

self.$anchor.on('shown.bs.popover', function(ev) {
    var tipCSS = self.$anchor.data('tipCSS');
    if (tipCSS !== undefined) {
        self.$anchor.data('bs.popover').$tip.css(tipCSS);
    }
    // ...
});

このように、ポップオーバーごとに z-index が異なる場合があり、BootstrapDialog モーダルの下にあるものもあれば、その上にあるものもあります。

于 2016-12-22T08:31:24.620 に答える
0

私の場合、ポップオーバー テンプレート オプションを使用して、独自の css クラスをテンプレート html に追加する必要がありました。

        $("[data-toggle='popover']").popover(
          {
            container: 'body',
            template: '<div class="popover top-modal" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
       });

CSS:

.top-modal {
  z-index: 99999;
}
于 2017-01-10T13:15:04.517 に答える
-1

variables.less の z-index マスター リストに関係している可能性があります。一般に、variables.less ファイルが正しく、最新であることを確認してください。

于 2012-12-24T20:31:30.840 に答える