bootstrap popover ไม่แสดงที่ด้านบนขององค์ประกอบทั้งหมด

ฉันกำลังทำงานบนเว็บไซต์ bootstrap และหลังจากอัปเดตเป็น bootstrap 2.2 จาก 2.0 ทุกอย่างทำงานได้ยกเว้น popover

ป๊อปอัปยังคงปรากฏได้ดี แต่ก็ไม่ปรากฏขึ้นบนองค์ประกอบอื่น ๆ ทั้งหมด

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

ใครมีความคิดเกี่ยวกับสาเหตุที่พฤติกรรมของ popover เปลี่ยนไปหรือฉันจะแก้ไขได้อย่างไร ขอบคุณ

ฉันสามารถแก้ไขปัญหาได้โดยการตั้งค่า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 แต่มีหนึ่งใน divs ที่ล้อมรอบที่มีคุณสมบัติการโอเวอร์โฟลว์ CSS ตั้งเป็นซ่อน

ฉันแก้ไขโดยการเพิ่มกิจกรรมในองค์ประกอบของฉันซึ่งเรียกป๊อปโอเวอร์ซึ่งเปลี่ยนคุณสมบัติโอเวอร์โฟลของ div ที่รับผิดชอบเป็นที่มองเห็นได้

สาเหตุที่เป็นไปได้มากที่สุดคือว่าเนื้อหาที่แสดงมากกว่า popover z-indexมีสูงขึ้น หากไม่มีรหัส / สไตล์ที่แม่นยำฉันสามารถเสนอตัวเลือกได้สองแบบ:

คุณควรพยายาม pinpointing องค์ประกอบที่แน่นอนกับผู้ตรวจสอบเว็บ (ปกติ F12 บนเบราว์เซอร์ที่คุณชื่นชอบ) z-indexและตรวจสอบที่เกิดขึ้นจริงของพวกเขา

หากคุณพบค่านี้คุณสามารถตั้งค่าให้ต่ำกว่าป๊อปโอเวอร์ซึ่งเป็นz-index: 1010;ค่าเริ่มต้น

หรือวิธีการอื่นที่ไม่ดีเท่าที่ควรคือการเพิ่มจำนวนz-indexของป๊อปโอเวอร์ คุณสามารถทำได้ทั้ง@zindexPopoverในไฟล์ Less หรือโดยตรงโดยการแทนที่

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

หากคุณไม่พบวิธีแก้ปัญหาคุณควรลองทำซ้ำข้อบกพร่องในบางสิ่งเช่นjsfiddle นี้ - คุณอาจแก้ไขปัญหาได้ในขณะที่พยายามรับข้อผิดพลาด

ฉันมีปัญหาที่คล้ายกันกับ 2 องค์ประกอบคงที่ - แม้ว่า heirachy ดัชนี z ถูกต้อง แต่คำแนะนำเครื่องมือ bootstrap ถูกซ่อนอยู่หลังองค์ประกอบหนึ่งที่มีดัชนี z ต่ำกว่า

การเพิ่ม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 ทำหน้าที่ได้ แต่ถ้าฉันตั้ง data-container = "body" มันจะไม่จัดแนวอย่างถูกต้องในกรณีของฉัน ดังนั้นฉันจึงระบุคลาสของ div parent ของ popover และทำงานได้ดี

HTML

ข้อมูลภาชนะ = "testDiv"

js

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

ทางออกที่ดีที่สุดถ้าคุณใช้เชิงมุม uib-bootsrap คือการใช้การฉีดแบบพึ่งพาสำหรับ $ uibTooltipProvider คุณสามารถเปลี่ยนวิธีแนะนำเครื่องมือและป๊อปอัปทำงานตามค่าเริ่มต้นสำหรับคำแนะนำเครื่องมือทั้งหมด

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

$ uibTooltipProvider ด้วย $ uibTooltipProvider คุณสามารถเปลี่ยนวิธีแนะนำเครื่องมือและป๊อปอัปทำงานตามค่าเริ่มต้น แอตทริบิวต์ด้านบนมีความสำคัญกว่าเสมอ มีวิธีการดังต่อไปนี้:

setTriggers (obj) (ตัวอย่าง: {'openTrigger': 'closeTrigger'}) - ขยายการแมปทริกเกอร์เริ่มต้นที่กล่าวถึงข้างต้นด้วยการแมปของคุณเอง

options (obj) - ระบุชุดค่าเริ่มต้นสำหรับคำแนะนำเครื่องมือและแอตทริบิวต์ของ popover ปัจจุบันสนับสนุนรายการที่มีตรา C

หลายปีต่อมา แต่อย่างฉันคนอื่น ๆ อาจค้นหาสิ่งนี้ การอัปเดตทั้งหมดโดยคำนึงถึงทั้งหมดนี้สามารถแก้ไขได้ด้วยตัวเลือกการเริ่มต้นที่ถูกต้องใน JavaScript

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

การตั้งค่าเหล่านั้นสามารถแก้ไขปัญหาทั้งหมดได้ ฉันมีคำแนะนำเครื่องมือกะพริบ, แสดงอย่างถูกต้องเพียงครึ่งหนึ่งของรายการในหน้า, กระโดดจากด้านบนไปทางซ้ายอย่างต่อเนื่อง, ความแปลกประหลาดทุกประเภท แต่ด้วยการตั้งค่าเหล่านั้นทุกอย่างได้รับการแก้ไข หวังว่ามันจะช่วยให้ทุกคนมอง

เพียงแค่ใช้

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

อาจไม่เพียงพอเมื่อแสดงป๊อปโอเวอร์ผ่าน Modst ของ 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);
    }
    // ...
});

วิธีการที่แตกต่างกันอาจมีป๊อปอัพดัชนีซีแตกต่างกันบางคนอยู่ภายใต้ Modal BootstrapDialog ในขณะที่คนอื่นอยู่เหนือมัน

ในกรณีของฉันฉันต้องใช้ตัวเลือกเทมเพลต popover และเพิ่มคลาส 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 เป็นร่างกายจากนั้นคุณสามารถใช้

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

กรณีอื่น ๆ อาจเกิดขึ้นเมื่อวาง popover ไว้ในองค์ประกอบอื่นและคุณต้องการแสดง popover เหนือองค์ประกอบนั้นจากนั้นคุณจะต้องระบุองค์ประกอบนั้นใน data-container ตัวอย่างสมมติว่าเรามีป๊อปโอเวอร์ใน bootstrap modal ที่มี id เป็น 'modal-two' จากนั้นคุณจะต้องตั้งค่า 'data-container' เป็น 'modal-two'

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

มันอาจจะเกี่ยวข้องกับรายการหลัก z-index บน variables.less โดยทั่วไปตรวจสอบให้แน่ใจว่าไฟล์แปรปรวนของคุณถูกต้องและเป็นปัจจุบัน