부트 스트랩 팝 오버가 모든 요소 위에 표시되지 않음

부트 스트랩 사이트에서 작업 중이며 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 overflow 속성이 숨겨진 것으로 설정된 둘러싸는 div 중 하나와 관련이 있습니다.

팝 오버를 트리거하는 요소에 이벤트를 추가하여 책임있는 div의 overflow 속성을 visible로 변경하여 문제를 해결했습니다.

가장 가능성있는 원인은 팝 오버 위에 표시되는 컨텐츠가 더 높다는 것 z-index입니다. 정확한 코드 / 스타일없이 두 가지 옵션을 제공 할 수 있습니다.

웹 검사기 (일반적으로 즐겨 사용하는 브라우저의 F12)를 사용하여 정확한 요소를 정확히 찾아 실제 요소를 확인해야 z-index합니다.

이 값을 찾아내는 경우에, 당신은 설정할 수 있습니다 팝 오버보다 낮은 것입니다 z-index: 1010;기본적으로

또는 다른 접근 방식은 좋지 않은 z-index경우 팝 오버 를 증가시키는 것 입니다. @zindexPopoverLess files에서 또는 재정 의하여 직접 수행 할 수 있습니다

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

해결책을 찾을 수 없다면 이 jsfiddle 과 같은 버그를 재현 해보십시오. 버그 를 얻는 동안 문제를 해결할 것입니다.

z-index heirachy가 정확하더라도 부트 스트랩 툴팁은 z-index가 낮은 하나의 요소 뒤에 숨겨져 있습니다.

추가하면 data-container="body"문제가 해결되었으며 이제 예상대로 작동합니다.

data-container = "body"가 작동하지 않으면 다른 두 가지 속성을 시도하십시오.

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

z- 색인은 최대 제한이어야합니다.

<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 = "body"를 설정하면 내 경우에는 올바르게 정렬되지 않습니다. 그래서 나는 팝 오버의 부모 div의 클래스를 지정했으며 정상적으로 작동했습니다.

html

data-container = ". testDiv"

js

$ ( "# testPop"). popover ({컨테이너 : '.testDiv'})

angular 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 모달을 통해 팝 오버를 표시 할 때 충분하지 않을 수 있습니다. 이는 body를 컨테이너로 사용하고 z 인덱스가 더 높습니다.

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- 인덱스를 가질 수 있으며, 일부는 BootstrapDialog 모달 아래에 있고, 다른 팝 오버는 위에 있습니다.

필자의 경우 popover template 옵션을 사용하고 자신의 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이 해당 요소 내에 대신 표시되도록 사용자 정의 컨테이너를 지정하려고합니다.

예를 들어 popover의 부모가 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 파일이 올 바르고 최신인지 확인하십시오.