बूटस्ट्रैप पॉपओवर सभी तत्वों के शीर्ष पर नहीं दिख रहा है

128

मैं बूटस्ट्रैप साइट पर काम कर रहा हूं और 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>

किसी को भी इस बात का कोई अंदाजा नहीं है कि पॉपओवर का व्यवहार क्यों बदल गया, या मैं इसे कैसे ठीक कर सकता हूं? धन्यवाद।

— केली
स्रोत

365

मैं 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

— केली
स्रोत

18

इससे वाकई मदद मिली। मैंने पॉपओवर इनिशियलाइज़ेशन में निम्न परिवर्तन किया और इसने काम किया: $ ('# एलिमेंट')। पॉपओवर ({कंटेनर: 'बॉडी', // अन्य पैरामीटर्स);

— पवन पिल्लई

मुझे उस लिंक के लिए 404 मिला। कृपया अपडेट करें?

— NoBrainer

3

@NoBrainer इसके लिए एक नई लिंक नहीं खोज सकता, लेकिन html तत्व में डेटा-कंटेनर = "बॉडी" जोड़ने से काम करना चाहिए, या कंटेनर में पास होना चाहिए: जावास्क्रिप्ट के माध्यम से 'बॉडी' भी काम करना चाहिए

— काइल

डेटा-कंटेनर जोड़ना = "बॉडी" बूटस्ट्रैप 3 के साथ-साथ टूलटिप में काम करना प्रतीत होता है, जब वे उदाहरण के लिए अतिप्रवाह में होते हैं

— बुलानेमास्टर

1

यद्यपि यह मूल z-index समस्या को हल करता है, तो पॉपओवर मूल ट्रिगर तत्व के साथ नहीं चिपकता है, एक बार जब आप स्क्रीन के चारों ओर चीजों को खींचना शुरू करते हैं, तो ज़ूम इन या आउट करते हैं, या विंडो को आकार देते हैं। इसके लिए खुद बेहतर जवाब की तलाश है।

— एमएससी

44

यह मेरे लिए काम कर रहा है

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

— साकिब आर।
स्रोत

1

बहुत बहुत धन्यवाद, आपने मुझे बचा लिया: D

— Vuong Tran

यह मेरे लिए भी काम किया। यह जानना महत्वपूर्ण है कि "कंटेनर" संपत्ति के लिए क्या मूल्य निर्धारित किया जाना चाहिए। संदर्भ के लिए, बूटस्ट्रैप पॉपुलेशन दस्तावेज़ से कॉपी की गई सामग्री - "जब आपके पास मूल तत्व पर कुछ शैलियाँ होती हैं, जो किसी पॉपओवर में बाधा डालती हैं, तो आप एक कस्टम कंटेनर निर्दिष्ट करना चाहेंगे ताकि पॉपओवर का HTML उसके बजाय उस तत्व के भीतर दिखाई दे।"

— निरमन

24

मेरे पास बस एक स्थिति थी जो इसी तरह की थी, जिसमें स्क्रॉलिंग सक्षम के साथ डेटाटेबल्स JQuery लाइब्रेरी शामिल थी।

जो निकला, उसका Z- सूचकांकों से कोई लेना-देना नहीं था, लेकिन एक एनक्लोजिंग डिव के साथ सीएसएस अतिप्रवाह संपत्ति छिपी हुई थी।

मैंने अपने ईवेंट को पॉपओवर ट्रिगर करने वाले इवेंट में जोड़कर इसे ठीक किया, जिसने जिम्मेदार div की अतिप्रवाह संपत्ति को दृश्यमान में बदल दिया।

— Dologan
स्रोत

7

आपने मेरे जीवन के केवल 2+ घंटे बचाए। अत्यंत आभारी!

— ओल्गा Gnatenko

1

तुम एक जीवन रक्षक हो !! मेरे द्वारा पढ़े गए सभी उत्तर z- इंडेक्स के बारे में थे और सच कहूं तो यह केवल एक चीज थी, जो मेरे लिए समझ में आती थी, लेकिन अंत में, जब तक मैंने आपके z- इंडेक्स असंबंधित उत्तर का प्रयास करने का फैसला नहीं किया, तब तक कोई भी सुझाव काम नहीं आया! थैंक्स

— सेबस्टियन

यह मेरी समस्या भी थी, धन्यवाद के घंटे बचाने के लिए बहुत बहुत धन्यवाद क्योंकि मुझे लगा कि मेरा कोड टूट गया है।

— गेटा

17

सबसे संभावित कारण यह है कि पॉपओवर पर प्रदर्शित सामग्री अधिक है z-index। सटीक कोड / शैली के बिना, मैं दो विकल्प दे सकता हूं:

आपको वेब निरीक्षक (आमतौर पर अपने पसंदीदा ब्राउज़र पर F12) के साथ सटीक तत्वों को पिनपॉइंट करने की कोशिश करनी चाहिए और उनके वास्तविक की जांच करनी चाहिए z-index।

यदि आपको यह मान मिलता है, तो आप इसे पॉपओवर से कम सेट कर सकते हैं जो z-index: 1010;डिफ़ॉल्ट रूप से है

या अन्य दृष्टिकोण, उतना अच्छा नहीं है, z-indexजो कि आबादी को बढ़ाने के लिए होगा । आप या तो @zindexPopoverकम फ़ाइलों में या सीधे ओवरराइड करके कर सकते हैं

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

यदि आपको कोई समाधान नहीं मिल रहा है, तो आपको बग को इस jsfiddle की तरह बग को पुन: प्रस्तुत करने का प्रयास करना चाहिए - आप संभवतः बग को प्राप्त करने का प्रयास करते समय समस्या का समाधान करेंगे।

— Sherbrow
स्रोत

मैं एक jsfiddle बनाने और वापस पोस्ट करने की कोशिश करूँगा अगर मुझे यह नहीं मिला, लेकिन मैंने कोशिश की कि पॉपओवर को 9999 का z-index नसीब के साथ बनाया जाए।

— काइल

1

पॉपओवर के डिफ़ॉल्ट z- इंडेक्स मान को इंगित करने के लिए धन्यवाद।

— विल तारीक

12

मेरे पास 2 निश्चित तत्वों के साथ एक समान मुद्दा था - भले ही z-index heirachy सही था, बूटस्ट्रैप टूलटिप एक तत्व z निचले-सूचकांक wth के पीछे छिपा हुआ था।

जोड़ना data-container="body"समस्या हल हो गई है और अब के रूप में की उम्मीद काम करता है।

— चार्ल क्रूगर
स्रोत

8

यदि डेटा-कंटेनर = "बॉडी" अन्य दो गुणों को आज़माने से काम नहीं करती है:

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

z-index की अधिकतम सीमा होनी चाहिए।

— नालन मधेश्वरन
स्रोत

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>

डेटा-कंटेनर में मान सेट करने में उपरोक्त उत्तर सहायक थे, लेकिन अगर मैंने डेटा-कंटेनर = "बॉडी" सेट किया, तो यह मेरे मामले में ठीक से संरेखित नहीं होता है। इसलिए मैंने पॉपओवर के पैरेंट डिव का वर्ग निर्दिष्ट किया और यह ठीक काम किया।

एचटीएमएल

डेटा-कंटेनर = "। testDiv"

js

$ ("# टेस्टपॉप")। पॉपओवर ({कंटेनर: '.testDiv'})

— Novice_JS
स्रोत

2

यह सबसे अच्छा समाधान यदि आप कोणीय यूआईबी-बूटस्ट्रैप का उपयोग कर रहे हैं तो $ uibTooltipProvider के लिए निर्भरता इंजेक्शन का उपयोग करना है, आप सभी टूलटिप्स के लिए डिफ़ॉल्ट रूप से टूलटिप्स और पॉपओवर व्यवहार करने के तरीके को बदल सकते हैं।

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

$ uibTooltipProvider $ uibTooltipProvider के माध्यम से, आप टूलटिप्स और पॉपओवर को डिफ़ॉल्ट रूप से व्यवहार करने के तरीके को बदल सकते हैं; ऊपर दिए गए गुण हमेशा पूर्वता लेते हैं। निम्नलिखित विधियाँ उपलब्ध हैं:

setTriggers (obj) (उदाहरण: {'openTrigger': 'closeTrigger'}) - अपने स्वयं के मैपिंग के साथ ऊपर उल्लिखित डिफ़ॉल्ट ट्रिगर मैपिंग को बढ़ाता है।

विकल्प (obj) - कुछ टूलटिप और पॉपओवर विशेषताओं के लिए डिफॉल्ट का एक सेट प्रदान करें। वर्तमान में सी बैज के साथ लोगों का समर्थन करता है।

— Enkode
स्रोत

2

कई साल बाद, लेकिन मेरी तरह, अन्य लोग इसके लिए खोज कर सकते हैं। सभी अपडेट को ध्यान में रखते हुए, यह सब जावास्क्रिप्ट में सही आरंभीकरण विकल्पों के साथ हल किया जा सकता है।

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

उन सेटिंग्स को हल सभी मुद्दों हो सकता है। मेरे पास टूलटिप्स टिमटिमा रहे थे, पृष्ठ पर केवल आधी वस्तुओं के लिए, केवल शीर्ष से बाईं ओर कूदते हुए, सभी प्रकार की विकृति दिखाते हुए। लेकिन उन सेटिंग्स के साथ सब कुछ हल हो जाता है। आशा है कि यह किसी को भी देखने में मदद करे।

— लूसियन मिनिया
स्रोत

0

बस उपयोग कर रहे हैं

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

बूटस्ट्रैपडायलॉग मोडल पर पॉपओवर प्रदर्शित करते समय पर्याप्त नहीं हो सकता है, जो कंटेनर के रूप में शरीर का उपयोग करता है और इसमें उच्च जेड-इंडेक्स होता है।

मैं इस फिक्स के साथ आता हूं जो बूटस्ट्र्रा के इंटर्नल का उपयोग करता है (2.x / 4.x के साथ काम नहीं कर सकता) लेकिन अधिकांश आधुनिक बूटस्ट्रैप इंस्टॉलेशन 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);
    }
    // ...
});

इस तरह से अलग-अलग पॉपओवर में अलग-अलग जेड-इंडेक्स हो सकते हैं, कुछ बूटस्ट्रैपडायलॉग मोडल के तहत होते हैं, जबकि दूसरे लोग इसके ऊपर होते हैं।

— दिमित्री सिन्टसोव
स्रोत

0

मेरे मामले में मुझे पॉपओवर टेम्पलेट विकल्प का उपयोग करना था और टेम्पलेट 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>'
       });

सीएसएस:

.top-modal {
  z-index: 99999;
}

— mortenma71
स्रोत

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
स्रोत

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

— अजय
स्रोत

0

जब आपके पास मूल तत्व पर कुछ शैलियाँ होती हैं जो किसी पॉपओवर में हस्तक्षेप करती हैं, तो आप एक कस्टम कंटेनर निर्दिष्ट करना चाहेंगे ताकि पॉपओवर का HTML उस तत्व के बजाय दिखाई दे।

उदाहरण के लिए कहें कि एक पॉपओवर के लिए माता-पिता शरीर है तो आप उपयोग कर सकते हैं।

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

अन्य मामला तब हो सकता है जब पॉपओवर को किसी अन्य तत्व के अंदर रखा जाता है और आप उस तत्व पर पॉपओवर दिखाना चाहते हैं, तो आपको उस तत्व को डेटा-कंटेनर में निर्दिष्ट करना होगा। ex: मान लीजिए, हमारे पास बूट मोड्रैप के अंदर 'मॉडल-टू' के रूप में पॉपओवर है, तो आपको 'डेटा-कंटेनर' को 'मोडल-टू' सेट करने की आवश्यकता होगी।

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

— सुमित क
स्रोत

-1

यह z- इंडेक्स मास्टर सूची के साथ variables.less पर करना पड़ सकता है। सामान्य तौर पर, सुनिश्चित करें कि आपकी चर। फ़ाइल सही और अद्यतित है।

— स्कॉट सिम्पसन
स्रोत