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

私はブートストラップサイトで作業しており、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>

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

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

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

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

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

判明したことは、Z-indicesとは何の関係もありませんでしたが、CSSオーバーフロープロパティが非表示に設定された、囲んでいるdivの1つでした。

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

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

Webインスペクタ（通常はお気に入りのブラウザのF12キー）を使用して正確な要素を正確に特定し、実際の要素を確認する必要がありz-indexます。

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

または、あまり良くない他のアプローチz-indexは、ポップオーバーの増加です。あなたはどちらかとそれを行うことができ@zindexPopoverオーバーライドすることにより、少ないファイルまたは直接で

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

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

私は2つの固定要素で同様の問題を抱えていました-Zインデックスの階層が正しかったにもかかわらず、ブートストラップツールチップはZインデックスが低い1つの要素の後ろに隠れていました。

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

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

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

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

<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"を設定すると、私の場合は正しく整列しません。だから私はpopoverの親divのクラスを指定しました、そしてそれはうまくいきました。

html

data-container = "。testDiv"

js

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

角度uib-bootsrapを使用している場合のこの最善の解決策は、$ uibTooltipProviderに依存関係注入を使用することです。デフォルトで、すべてのツールチップのツールチップとポップオーバーの動作を変更できます。

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

$ uibTooltipProvider $ uibTooltipProviderを使用すると、ツールチップとポップオーバーのデフォルトの動作を変更できます。上記の属性が常に優先されます。次のメソッドを使用できます。

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

オプション（obj）-特定のツールチップとポップオーバー属性にデフォルトのセットを提供します。現在、Cバッジ付きのものをサポートしています。

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

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

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

ただ使う

$().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モーダルの下にあり、別のものはその上にあります。

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

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

  $('[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

親要素にポップオーバーを妨げるいくつかのスタイルがある場合は、代わりにカスタムコンテナーを指定して、ポップオーバーのHTMLがその要素内に表示されるようにします。

たとえば、ポップオーバーの親がbodyだとすると、使用できます。

    <a href="#" data-toggle="tooltip" data-container="body"> Popover One </a>

他のケースとしては、ポップオーバーが他の要素内に配置され、その要素の上にポップオーバーを表示したい場合が考えられます。その場合、データコンテナーでその要素を指定する必要があります。例：ブートストラップモーダル内にidが「modal-two」のポップオーバーがある場合、「data-container」を「modal-two」に設定する必要があります。

    <a href="#" data-toggle="tooltip" data-container="#modal-two"> Popover Two </a>

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