web-dev-qa-db-ja.com

bootstrapポップオーバーがすべての要素の上に表示されない

私はbootstrapサイトで作業しており、2.0からbootstrap 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>

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

javascripthtmltwitter-bootstrappopover
121
Kyle

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

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

347
Kyle

これは私のために働いています

$().popover({container: 'body'})
41
Saqib R.

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

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

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

21
Dologan

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

Webインスペクター（通常、お気に入りのブラウザーではF12）で正確な要素を特定し、実際のz-indexを確認してください。

この値を見つけたら、それを設定できますポップオーバーよりも低いこれはデフォルトで z-index: 1010;です

または、他のアプローチは、あまり良くありませんが、ポップオーバーのz-indexを増やすことです。 Lessファイルで@zindexPopoverを使用するか、オーバーライドして直接行うことができます

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

解決策が見つからない場合は、 this jsfiddle のようにバグを再現してみてください-バグを取得する際に問題を解決できる可能性があります。

15
Sherbrow

2つの固定要素で同様の問題が発生しました。z-indexheirachyが正しいにもかかわらず、bootstrapツールチップは、より低いz-indexを持つ1つの要素の後ろに隠れていました。

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

11
Charl Kruger

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

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

z-indexは最大制限である必要があります。

7
Nalan Madheswaran
<div class="testDiv">
<a tabindex = "-1" id="testPop" title="stuff" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-container=".testDiv">
 <i class="fa fa-info-circle"></i>
</a>

</div>

上記の回答は、data-containerに値を設定することでうまくいきましたが、data-container = "body"を設定すると、私の場合は適切に調整されません。だから、私はポップオーバーの親divのクラスを指定し、それはうまく働きました。

html

data-container = "。testDiv"

js

$（ "＃testPop"）。popover（{container： '.testDiv'}）

5
Novice_JS

angular uib-bootsrapを使用している場合のこの最適なソリューションは、$ uibTooltipProviderに依存性注入を使用することです。ツールチップおよびポップオーバーがデフォルトですべてのツールチップに対して動作する方法を変更できます。

$uibTooltipProvider.options({
  appendToBody: true
});

$ uibTooltipProvider $ uibTooltipProviderを使用して、デフォルトでツールチップとポップオーバーの動作を変更できます。上記の属性が常に優先されます。以下の方法が利用可能です：

setTriggers（obj）（例：{'openTrigger'： 'closeTrigger'}）-上記のデフォルトのトリガーマッピングを独自のマッピングで拡張します。

options（obj）-特定のツールヒントおよびポップオーバー属性のデフォルトのセットを提供します。現在、Cバッジのあるものをサポートしています。

2
Enkode

何年も後ですが、私と同じように、他の人がこれを探すかもし​​れません。 JavaScriptの正しい初期化オプションを使用して、すべての更新を考慮に入れて、これらすべてを解決できます。

$('.tip').tooltip({
    boundary: 'viewport',
    placement: 'top',
    container:'body',
    sanitize: true,
    appendToBody: true
});

これらの設定はすべての問題を解決しました。私はツールチップがちらつき、ページ上のアイテムの半分だけを共調に表示し、上から左へと連続的にジャンプし、あらゆる種類の奇妙さを見せました。しかし、これらの設定ですべてが解決されます。探している人に役立つことを願っています。

1
Lucian Minea
Problem solved with data-container="body" and z-index
1->
<div class="button btn-align"
data-container="body"  
data-toggle="popover"
data-placement="top"
title="Top"
data-trigger="hover"
data-title-backcolor="#fff"
data-content="A top aligned popover is a really boring thing in the real 
life.">Top</div>
2->
.ggpopover.in {
z-index: 9999 !important;
}
1
ecalimac

ただ使って

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

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

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モーダルの下にあり、別のポップオーバーはその上にあります。

0
Dmitriy Sintsov
  $('[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
0
Ajay

私の場合、ポップオーバーテンプレートオプションを使用して、独自の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;
}
0
mortenma71