bootstrap açılır bilgi penceresi tüm öğelerin üstünde gösterilmiyor

Bir önyükleme sitesinde çalışıyorum ve 2.0'dan önyükleme 2.2'ye güncelledikten sonra açılır pencere dışında her şey çalıştı.

Popover'lar hala iyi görünüyor, ancak diğer tüm öğelerin üstünde görünmüyorlar.

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

Açılır bilgi penceresinin davranışının neden değiştiği veya bunu nasıl düzeltebileceğim konusunda herhangi bir fikri olan var mı? Teşekkürler.

data-container="body"Html öğesini ayarlayarak sorunu çözebildim

HTML misal:

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

JavaScript misal:

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

Bu bağlantıdan keşfedildi: https://github.com/twitter/bootstrap/issues/5889

Bu benim için çalışıyor

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

Kaydırmanın etkin olduğu DataTables JQuery kitaplığını içeren, buna benzer bir durum yaşadım.

Z-endeksleri ile ilgisi olduğu ortaya çıktı, ancak çevreleyen divlerden birinin CSS taşma özelliği gizli olarak ayarlanmasıyla ilgisi vardı.

Sorumlu div'in taşma özelliğini de görünür olarak değiştiren açılır pencereyi tetikleyen öğeme bir olay ekleyerek bunu düzelttim.

En olası neden, açılır pencerede görüntülenen içeriğin daha yüksek olmasıdır z-index. Kesin kod / stil olmadan iki seçenek sunabilirim:

Bir web denetçisiyle (genellikle favori tarayıcınızda F12) öğeleri tam olarak belirlemeyi denemeli ve gerçeklerini kontrol etmelisiniz z-index.

Bu değeri bulmak, bunu ayarlayabilirsiniz popover daha düşük olduğu z-index: 1010;varsayılan olarak

Ya da diğer yaklaşım, o kadar iyi olmayan z-index, popover'ı artırmak olacaktır. Bunu daha @zindexPopoveraz dosyasında ile veya doğrudan geçersiz kılarak yapabilirsiniz.

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

Bir çözüm bulamazsanız, bu jsfiddle gibi bir şeyde hatayı yeniden oluşturmayı denemelisiniz - muhtemelen hatayı almaya çalışırken sorunu çözeceksiniz .

2 sabit öğeyle benzer bir sorun yaşadım - z-endeksi mirasçısı doğru olmasına rağmen, önyükleme araç ipucu daha düşük bir z-endeksine sahip tek bir elemanın arkasına gizlenmişti.

Eklemek data-container="body"sorunu çözdü ve artık beklendiği gibi çalışıyor.

Data-container = "body", diğer iki özelliği denemek yerine çalışmazsa:

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

z-endeksi maksimum sınır olmalıdır.

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

Yukarıdaki cevaplar, veri konteynerinde değer ayarlanması işi yaptığından yardımcı oldu, ancak data-container = "body" ayarlarsam, benim durumumda düzgün hizalanmıyor. Bu yüzden açılır pencerenin ebeveyn div sınıfını belirledim ve iyi çalıştı.

html

veri kap = "testDiv"

js

$ ("# testPop"). popover ({kapsayıcı: '.testDiv'})

Açısal uib-bootsrap kullanıyorsanız bu en iyi çözüm $ uibTooltipProvider için bağımlılık enjeksiyonu kullanmaktır, tüm araç ipuçları için varsayılan olarak araç ipuçlarının ve açılır pencerelerin davranış şeklini değiştirebilirsiniz.

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

$ uibTooltipProvider $ uibTooltipProvider aracılığıyla, araç ipuçlarının ve açılır pencerelerin varsayılan olarak nasıl davranacağını değiştirebilirsiniz; yukarıdaki öznitelikler her zaman önceliklidir. Aşağıdaki yöntemler mevcuttur:

setTriggers (obj) (Örnek: {'openTrigger': 'closeTrigger'}) - Yukarıda belirtilen varsayılan tetikleyici eşlemelerini kendi eşlemelerinizle genişletir.

options (obj) - Belirli araç ipucu ve açılır bilgi nitelikleri için bir dizi varsayılan sağlar. Şu anda C rozetine sahip olanları desteklemektedir.

Yıllar sonra, ama benim gibi diğerleri bunu arayabilir. Tüm güncellemeler dikkate alındığında, tüm bunlar JavaScript'te doğru başlatma seçenekleriyle çözülebilir.

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

Bu ayarlar tüm sorunları çözdü. Araç ipuçları titreşiyordu, sayfadaki öğelerin yalnızca yarısını doğru bir şekilde gösteriyordu, sürekli yukarıdan sola atlıyordu, her türlü tuhaflık. Ancak bu ayarlarla her şey çözüldü. Umarım arayanlara yardımcı olur.

Sadece kullanıyorum

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

aynı zamanda kapsayıcı olarak gövdeyi kullanan ve daha yüksek bir z-endeksine sahip olan bir BootstrapDialog modeli üzerinde açılır bilgi penceresi görüntülenirken yeterli olmayabilir.

Bootstrap3'ün iç kısımlarını kullanan (2.x / 4.x ile çalışmayabilir) ancak modern Bootstrap kurulumlarının çoğu 3.x olan bu düzeltme ile geliyorum.

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);
    }
    // ...
});

Bu şekilde, farklı popover'ların farklı z-indeksi olabilir, bazıları BootstrapDialog modal altındayken diğerleri bunun üzerindedir.

Benim durumumda, açılır pencere şablonu seçeneğini kullanmam ve html şablonuna kendi css sınıfımı eklemem gerekiyordu:

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

Bir ana öğede bir açılır bilgi penceresini engelleyen bazı stilleriniz olduğunda, bunun yerine açılır pencerenin HTML'sinin o öğe içinde görünmesi için özel bir kap belirtmek isteyeceksiniz.

Örneğin, bir açılır bilgi penceresinin üst öğesinin body olduğunu söyleyin, sonra kullanabilirsiniz.

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

Diğer durum, açılır pencere başka bir öğenin içine yerleştirildiğinde ve bu öğenin üzerinde açılır pencereyi göstermek istediğinizde olabilir, o zaman bu öğeyi veri kabında belirtmeniz gerekir. Ör: "modal-iki" kimliğine sahip bir önyükleme kalıbının içinde açılır pencerenin olduğunu varsayalım, o zaman "veri-kapsayıcı" yı "modal-iki" olarak ayarlamanız gerekir.

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

Değişkenler üzerindeki z-endeksi ana listesi ile ilgisi olabilir. Genel olarak, değişkenler.less dosyanızın doğru ve güncel olduğundan emin olun.