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

128

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.

Kyle
fonte

Respostas:

365

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

Kyle
fonte
18
Isso realmente ajudou. Fiz a seguinte alteração na inicialização do popover e funcionou: $ ('# element'). Popover ({container: 'body', // outros parâmetros});
Pawan Pillai 13/07/2013
Eu tenho um 404 para esse link. Atualização, por favor?
NoBrainer
3
@NoBrainer Parece que não consegue encontrar um novo link para ele, mas adicionar data-container = "body" ao elemento html deve funcionar ou passar no container: 'body' através de javascript também deve funcionar
Kyle
adicionando-dados recipiente = "corpo" parece funcionar em 3 de bootstrap, bem como para as dicas, quando eles são, por exemplo, em transbordamento
bulanmaster
1
Embora isso resolva o problema do índice z original, a popover não fica com o elemento de gatilho original quando você começa a arrastar coisas pela tela, aumentar ou diminuir o zoom ou redimensionar a janela. Procurando uma resposta melhor para isso eu mesmo.
MSC
44

Isso está funcionando para mim

$().popover({container: 'body'})
Saqib R.
fonte
1
Muito obrigado, você me salvou: D
Vuong Tran
Isso funcionou para mim também. é importante saber qual valor precisa ser definido para a propriedade "container". Apenas para referência, o conteúdo copiado do documento de pop-ups de inicialização - "Quando você tem alguns estilos em um elemento pai que interferem em uma popover, você deve especificar um contêiner personalizado para que o HTML da popover apareça nesse elemento".
Nirman 15/09/19
24

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.

Dologan
fonte
7
Você acabou de salvar mais de 2 horas da minha vida. Extremamente grato!
Olga Gnatenko #
1
Você é um salva-vidas !! Todas as respostas que li foram sobre o índice z e, para ser sincero, foi a única coisa que fez sentido para mim, mas no final, nenhuma das sugestões funcionou até que eu decidi tentar sua resposta não relacionada ao índice z! Thanx
Sebastian
Esse também era meu problema, muito obrigado por me poupar horas de retrabalho, pois pensei que meu código estava quebrado.
GETah 12/08/19
17

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.

Sherbrow
fonte
Vou tentar fazer um jsfiddle e postar de volta, se não o encontrar, mas tentei tornar o popover um índice z de 9999 sem sorte.
Kyle
1
obrigado por apontar o valor padrão do índice z do popover.
que você precisa
12

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.

Charl Kruger
fonte
8

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.

Nalan Madheswaran
fonte
5
<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'})

Novice_JS
fonte
2

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.

Enkode
fonte
2

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.

Lucian Minea
fonte
0

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.

Dmitriy Sintsov
fonte
0

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;
}
mortenma71
fonte
0
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;
}
ecalimac
fonte
0
  $('[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
Ajay
fonte
0

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>
SumitK
fonte
-1

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.

Scott Simpson
fonte