bootstrap popover không hiển thị trên đầu trang của tất cả các yếu tố

Tôi đang làm việc trên một trang web bootstrap và sau khi cập nhật lên bootstrap 2.2 từ 2.0, mọi thứ đều hoạt động trừ popover.

Các popovers vẫn hiển thị tốt, nhưng chúng không hiển thị trên đầu trang của tất cả các yếu tố khác.

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

Bất cứ ai cũng có bất kỳ ý tưởng về lý do tại sao hành vi của popover thay đổi, hoặc làm thế nào tôi có thể sửa chữa nó? Cảm ơn.

Tôi đã có thể giải quyết vấn đề bằng cách cài đặt data-container="body"phần tử html

HTML thí dụ:

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

JavaScript thí dụ:

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

Được phát hiện từ liên kết này: https://github.com/twitter/bootstrap/issues/5889

Đây là làm việc cho tôi

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

Tôi vừa gặp một tình huống tương tự như vậy, liên quan đến thư viện JQuery của DataTables với tính năng cuộn được bật.

Điều này hóa ra không liên quan gì đến các chỉ số Z, nhưng với một trong các div kèm theo có thuộc tính tràn CSS được đặt thành ẩn.

Tôi đã sửa nó bằng cách thêm một sự kiện vào phần tử của tôi để kích hoạt cửa sổ bật lên cũng thay đổi thuộc tính tràn của div có trách nhiệm thành hiển thị.

Nguyên nhân có thể xảy ra nhất là nội dung hiển thị trên cửa sổ bật lên có mức cao hơn z-index. Nếu không có mã / kiểu chính xác, tôi có thể cung cấp hai tùy chọn:

Bạn nên thử xác định chính xác các yếu tố bằng trình kiểm tra web (thường là F12 trên trình duyệt yêu thích của bạn) và kiểm tra thực tế của chúng z-index.

Nếu bạn tìm thấy giá trị này, bạn có thể thiết lập nó hạ thấp hơn so với popover mà là z-index: 1010;theo mặc định

Hoặc cách tiếp cận khác, không tốt bằng, sẽ là tăng sự xuất hiện z-indexcủa popover. Bạn có thể làm điều đó với các @zindexPopovertệp trong Ít hơn hoặc trực tiếp bằng cách ghi đè

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

Nếu bạn không thể tìm ra giải pháp, bạn nên thử tái tạo lỗi trong một cái gì đó như jsfiddle này - bạn có thể sẽ giải quyết vấn đề trong khi cố gắng khắc phục lỗi.

Tôi gặp vấn đề tương tự với 2 yếu tố cố định - mặc dù người thừa kế chỉ số z là chính xác, nhưng tooltip bootstrap được ẩn đằng sau một yếu tố với chỉ số z thấp hơn.

Thêm data-container="body"giải quyết vấn đề và bây giờ làm việc như mong đợi.

Nếu data-container = "body" không hoạt động hơn hãy thử hai thuộc tính khác:

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

chỉ số z phải là giới hạn tối đa.

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

Các câu trả lời ở trên rất hữu ích vì cài đặt giá trị trong bộ chứa dữ liệu đã thực hiện công việc nhưng nếu tôi đặt data-container = "body" thì nó không phù hợp với trường hợp của tôi. Vì vậy, tôi đã chỉ định lớp của div cha mẹ của popover và nó hoạt động tốt.

html

thùng chứa dữ liệu = ". testDiv"

js

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

Giải pháp tốt nhất này nếu bạn đang sử dụng uib-bootsrap góc cạnh là Sử dụng phép tiêm phụ thuộc cho $ uibTooltipProvider, bạn có thể thay đổi cách thức của các chú giải công cụ và cửa sổ bật lên theo mặc định cho tất cả các chú giải công cụ.

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

$ uibTooltipProvider Thông qua $ uibTooltipProvider, bạn có thể thay đổi cách thức công cụ và cửa sổ bật lên theo mặc định; các thuộc tính ở trên luôn được ưu tiên. Các phương pháp sau đây có sẵn:

setTriggers (obj) (Ví dụ: {'openTrigger': 'closeTrigger'}) - Mở rộng ánh xạ kích hoạt mặc định được đề cập ở trên với ánh xạ của riêng bạn.

tùy chọn (obj) - Cung cấp một bộ mặc định cho các thuộc tính công cụ và popover nhất định. Hiện đang hỗ trợ những người có huy hiệu C.

Nhiều năm sau, nhưng giống như tôi, những người khác có thể tìm kiếm điều này. Tất cả các cập nhật có tính đến, tất cả điều này có thể được giải quyết bằng các tùy chọn khởi tạo chính xác, bằng JavaScript.

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

Những thiết lập đã giải quyết tất cả các vấn đề có thể. Tôi có các công cụ nhấp nháy, hiển thị rõ ràng chỉ cho một nửa các mục trên trang, nhảy từ trên xuống bên trái liên tục, tất cả các loại wierdness. Nhưng với những thiết lập đó, mọi thứ đều được giải quyết. Hy vọng nó sẽ giúp bất cứ ai tìm kiếm.

Chỉ cần sử dụng

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

có thể không đủ khi hiển thị cửa sổ bật lên qua phương thức BootstrapDialog, cũng sử dụng phần thân làm vùng chứa và có chỉ số z cao hơn.

Tôi đi kèm với bản sửa lỗi này sử dụng phần bên trong của Bootstrap3 (có thể không hoạt động với 2.x / 4.x) nhưng hầu hết các bản cài đặt Bootstrap hiện đại là 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);
    }
    // ...
});

Như vậy, các popovers khác nhau có thể có chỉ số z khác nhau, một số theo phương thức BootstrapDialog, trong khi các popovers khác vượt qua nó.

Trong trường hợp của tôi, tôi đã phải sử dụng tùy chọn mẫu popover và thêm lớp css của riêng tôi vào mẫu 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

Khi bạn có một số kiểu trên phần tử cha can thiệp vào cửa sổ bật lên, bạn sẽ muốn chỉ định vùng chứa tùy chỉnh để HTML của cửa sổ bật lên xuất hiện trong phần tử đó.

Ví dụ, cha mẹ cho một popover là cơ thể thì bạn có thể sử dụng.

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

Trường hợp khác có thể là khi popover được đặt bên trong một số phần tử khác và bạn muốn hiển thị popover trên phần tử đó, thì bạn sẽ cần chỉ định phần tử đó trong bộ chứa dữ liệu. ví dụ: Giả sử, chúng ta có cửa sổ bật lên trong một chế độ bootstrap với id là 'modal-hai', sau đó bạn sẽ cần đặt 'thùng chứa dữ liệu' thành 'modal-hai'.

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

Nó có thể phải làm với danh sách chủ chỉ mục z trên biến.less. Nói chung, hãy chắc chắn rằng tệp biến.less của bạn là chính xác và cập nhật.