popover de autoinicialização não aparece no topo de todos os elementos

Estou trabalhando em um site de bootstrap e, depois de atualizar para o bootstrap 2.2 a partir do 2.0, tudo funcionou, exceto o popover.

Os popovers ainda aparecem bem, mas não aparecem em cima de todos os outros elementos.

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

Alguém tem alguma idéia de por que o comportamento da popover mudou ou como posso corrigi-lo? Obrigado.

Consegui resolver o problema definindo data-container="body"o elemento html

HTML exemplo:

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

JavaScript exemplo:

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

Descoberto a partir deste link: https://github.com/twitter/bootstrap/issues/5889

Isso está funcionando para mim

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

Acabei de ter uma situação semelhante a essa, envolvendo a biblioteca JQuery do DataTables com a rolagem ativada.

O que acabou por ser nada tinha a ver com índices Z, mas com um dos divs anexos com a propriedade de estouro de CSS definida como oculta.

Corrigi-o adicionando um evento ao meu elemento acionando o popover que também alterava a propriedade overflow da div responsável para visível.

A causa mais provável é que o conteúdo exibido sobre o popover tem um valor mais alto z-index. Sem o código / estilo preciso, posso oferecer duas opções:

Você deve tentar identificar os elementos exatos com um inspetor da Web (geralmente o F12 no seu navegador favorito) e verificar os dados reais z-index.

Se você encontrar esse valor, poderá configurá-lo abaixo do popover, que é z-index: 1010;por padrão

Ou a outra abordagem, não tão boa, seria aumentar a taxa z-indexde popover. Você pode fazer isso com os @zindexPopoverarquivos Menos ou diretamente, substituindo

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

Se você não encontrar uma solução, tente reproduzir o bug em algo como este jsfiddle - provavelmente resolverá o problema ao tentar obtê-lo.

Eu tive um problema semelhante com dois elementos fixos - mesmo que a heirachy do índice z estivesse correta, a dica de ferramenta de inicialização estava oculta atrás do único elemento com um índice z mais baixo.

A adição data-container="body"resolveu o problema e agora funciona como esperado.

Se data-container = "body" não funcionar, tente outras duas propriedades:

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

O índice z deve ser o limite máximo.

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

As respostas acima foram úteis, pois a definição de valor no contêiner de dados fez o trabalho, mas se eu definir o contêiner de dados = "corpo", ele não estará alinhado corretamente no meu caso. Então, eu especifiquei a classe do div pai do popover e funcionou bem.

html

data-container = ". testDiv"

js

$ ("# testPop"). popover ({container: '.testDiv'})

A melhor solução se você estiver usando o uib-bootsrap angular é Usar injeção de dependência para $ uibTooltipProvider, você pode alterar a maneira como as dicas de ferramenta e popovers se comportam por padrão em todas as dicas de ferramenta.

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

$ uibTooltipProvider Por meio do $ uibTooltipProvider, você pode alterar a maneira como as dicas de ferramentas e popovers se comportam por padrão; os atributos acima sempre têm precedência. Os seguintes métodos estão disponíveis:

setTriggers (obj) (Exemplo: {'openTrigger': 'closeTrigger'}) - Estende os mapeamentos de gatilho padrão mencionados acima com seus próprios.

opções (obj) - forneça um conjunto de padrões para certos atributos de dica de ferramenta e popover. Atualmente suporta aqueles com o emblema C.

Muitos anos depois, mas como eu, outros podem procurar por isso. Todas as atualizações levando em consideração, tudo isso pode ser resolvido com as opções de inicialização corretas, em JavaScript.

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

Essas configurações resolveram todos os problemas. Eu tinha dicas de ferramentas piscando, mostrando corretamente apenas metade dos itens da página, pulando de cima para a esquerda continuamente, todos os tipos de estranheza. Mas com essas configurações tudo está resolvido. Espero que ajude quem estiver olhando.

Apenas usando

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

pode não ser suficiente ao exibir popover sobre um modal BootstrapDialog, que também usa body como contêiner e tem um índice z mais alto.

Eu venho com essa correção, que usa internals do Bootstrap3 (pode não funcionar com 2.x / 4.x), mas a maioria das instalações modernas do 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);
    }
    // ...
});

Dessa maneira, popovers diferentes podem ter índices z diferentes, alguns estão sob o modal BootstrapDialog, enquanto outros estão sobre ele.

No meu caso, tive que usar a opção de modelo popover e adicionar minha própria classe css ao modelo 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

Quando você tem alguns estilos em um elemento pai que interferem em uma popover, convém especificar um contêiner personalizado para que o HTML da popover apareça nesse elemento.

Por exemplo, digamos que o pai de uma popover seja o corpo, então você pode usá-lo.

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

Outro caso pode ser quando o popover é colocado dentro de algum outro elemento e você deseja mostrar o popover sobre esse elemento, então você precisará especificar esse elemento no contêiner de dados. ex: suponha que tenhamos popover dentro de um modal de bootstrap com o ID como 'modal-two', então você precisará definir 'data-container' como 'modal-two'.

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

Pode ter a ver com a lista principal do z-index em variables.less. Em geral, verifique se o arquivo variables.less está correto e atualizado.