বুটস্ট্র্যাপ পপওভার সমস্ত উপাদানগুলির উপরে প্রদর্শিত হচ্ছে না

Question

আমি একটি বুটস্ট্র্যাপ সাইটে কাজ করছি এবং ২.২ থেকে বুটস্ট্র্যাপ ২.২ এ আপডেট করার পরে পপওভার ব্যতীত সবকিছুই কাজ করেছে।

পপওভারগুলি এখনও দুর্দান্ত দেখায়, তবে অন্য সমস্ত উপাদানগুলির উপরে তারা প্রদর্শিত হয় না।

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

পপওভারের আচরণ কেন বদলেছে বা আমি কীভাবে এটি সংশোধন করতে পারি সে সম্পর্কে কারও ধারণা আছে? ধন্যবাদ।

Answer 1

আমি data-container="body"এইচটিএমএল উপাদানটি সেট করে সমস্যার সমাধান করতে সক্ষম হয়েছি

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

Comments

এটি সত্যিই সাহায্য করেছে। আমি পপওভার সূচনাতে নিম্নলিখিত পরিবর্তন করেছি এবং এটি কাজ করেছে: $ ('# উপাদান') pop পপওভার ({ধারক: 'বডি', // অন্যান্য পরামিতি});

— পবন পিল্লাই

আমি এই লিঙ্কটির জন্য একটি 404 পেয়েছি। আপডেট, প্লিজ?

— NoBrainer

@ নোব্রেনার এটির জন্য কোনও নতুন লিঙ্ক খুঁজে পাচ্ছে না, তবে এইচটিএমএল উপাদানটিতে ডেটা-ধারক = "বডি" যুক্ত করা কাজ করা উচিত, বা পাত্রে প্রবেশ করা উচিত: জাভাস্ক্রিপ্টের মাধ্যমে 'বডি' কাজ করা উচিত

— কাইল

ডেটা-কন্টেইনারটি যোগ করে = "বডি" বুটস্ট্রেপ 3

— তেও

মূল জেড-ইনডেক্স ইস্যুটি এর প্রকারভেদে, পপওভারটি যখন আপনি স্ক্রিনের চারপাশে জিনিসগুলি টেনে আনতে, জুম বা আউট করে বা উইন্ডোটি পুনরায় আকার দেওয়া শুরু করেন তখন মূল ট্রিগার উপাদানটির সাথে আটকে থাকে না। আমি নিজেই এর জন্য আরও ভাল উত্তর খুঁজছি।

— এমএসসি

Answer 2

এটা আমার জন্য কাজ করছে

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

Comments

অনেক অনেক ধন্যবাদ, আপনি আমাকে বাঁচিয়েছেন: ডি

— ভুং ট্রান

এটি আমার পক্ষেও কাজ করেছিল। "ধারক" বৈশিষ্ট্যের জন্য কী মান নির্ধারণ করা দরকার তা জানা গুরুত্বপূর্ণ। কেবল রেফারেন্সের জন্য, বুটস্ট্র্যাপ পপওভার ডকুমেন্ট থেকে অনুলিপি করা বিষয়বস্তু - "যখন পপওভারে হস্তক্ষেপকারী কোনও পিতামাতার উপাদানগুলিতে আপনার কিছু স্টাইল থাকে তখন আপনি একটি কাস্টম ধারক নির্দিষ্ট করতে চান যাতে পরিবর্তে পপওভারের এইচটিএমএল সেই উপাদানটির মধ্যে উপস্থিত হয়।"

— নির্মান

Answer 3

আমার সবেমাত্র একটি পরিস্থিতি ছিল যা এর সাথে সাদৃশ্যপূর্ণ ছিল, স্ক্রোলিং সক্ষম করার সাথে ডেটাবেবলস জিকুয়ের লাইব্রেরি জড়িত।

যা পরিণত হয়েছিল জেড-ইনডেক্সগুলির সাথে কিছুই করার ছিল না, তবে সিএসএসের ওভারফ্লো সম্পত্তিটি গোপন হিসাবে সেট করে রাখা একটি ঘের ডিভের সাথে।

আমি পপওভারকে ট্রিগার করতে আমার উপাদানটিতে একটি ইভেন্ট যুক্ত করে এটি ঠিক করেছি যা দায়বদ্ধ ডিভের ওভারফ্লো সম্পত্তিটি দৃশ্যমান করেও পরিবর্তন করেছে।

Comments

আপনি আমার জীবনের মাত্র 2+ ঘন্টা সঞ্চয় করেছেন। অত্যন্ত কৃতজ্ঞ!

— ওলগা জনাটেনকো

তুমি লাইফ সেভার !! আমি যে সমস্ত উত্তর পড়েছি তা জেড-ইনডেক্স সম্পর্কে ছিল এবং সত্য কথা বলতে গেলে এটিই কেবল আমার পক্ষে বোধগম্য হয়েছিল, তবে শেষ পর্যন্ত, আমি আপনার জেড-ইনডেক্সের সাথে সম্পর্কযুক্ত উত্তর চেষ্টা করার সিদ্ধান্ত না নেওয়া পর্যন্ত কোনও প্রস্তাবনা কার্যকর হয়নি! থ্যাঙ্কস

— সেবাস্তিয়ান

এটি আমার সমস্যাটিও ছিল, আমার কোডটি নষ্ট হয়ে গেছে বলে মনে হওয়ায় আমাকে পুনরায় কাজ করার কয়েক ঘন্টা বাঁচানোর জন্য অনেক ধন্যবাদ।

— গিটা

Answer 4

সর্বাধিক সম্ভাব্য কারণটি হ'ল পপওভারের উপরে প্রদর্শিত সামগ্রীটি একটি উচ্চতর z-index । সুনির্দিষ্ট কোড / শৈলী ব্যতীত আমি দুটি বিকল্প দিতে পারি:

আপনার ওয়েব ইন্সপেক্টর (সাধারণত আপনার পছন্দসই ব্রাউজারে এফ 12) দিয়ে সঠিক উপাদানগুলিকে পিনপয়েন্ট করার চেষ্টা করা উচিত এবং তাদের আসল পরীক্ষা করা উচিত z-index ।

আপনি এই মান খুঁজে পান, তাহলে আপনি এটি সেট করতে পারেন popover কম যা z-index: 1010;ডিফল্টভাবে

---

বা অন্য পদ্ধতির, হিসাবে ভাল না z-indexপপওভার এর বৃদ্ধি করা হবে । আপনি @zindexPopoverএটি কম ফাইলগুলিতে বা সরাসরি ওভাররাইড করে করতে পারেন

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

---

যদি আপনি কোনও সমাধান খুঁজে না পান, আপনার এই jsfiddle এর মতো কিছুতে বাগটি পুনরুত্পাদন করার চেষ্টা করা উচিত - বাগটি পাওয়ার চেষ্টা করার সময় আপনি সম্ভবত সমস্যার সমাধান করবেন।

Comments

আমি যদি একটি জিসফিল তৈরি করার চেষ্টা করব এবং এটি না পেলে ফিরে পোস্ট করব, তবে আমি ভাগ্য ছাড়াই পপওভারকে 9999 এর জেড-সূচক তৈরি করার চেষ্টা করেছি।

— কাইল

পপওভারের ডিফল্ট জেড-সূচক মানটি নির্দেশ করার জন্য ধন্যবাদ।

— তরতক

Answer 5

আমার 2 টি স্থির উপাদানগুলির সাথে একই ধরণের সমস্যা ছিল - z-અનુક્રમણির উত্তরাধিকারসূত্রে সঠিক হওয়া সত্ত্বেও, বুটস্ট্র্যাপের সরঞ্জামটিপটি নীচের জেড-ইনডেক্সের সাথে একটি উপাদানটির পিছনে লুকানো ছিল।

যোগ data-container="body"করার ফলে সমস্যার সমাধান হয়েছে এবং এখন প্রত্যাশার মতো কাজ করে।

Answer 6

যদি ডাটা-পাত্রে = "বডি" কাজ না করে অন্য দুটি বৈশিষ্ট্য চেষ্টা করে:

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

জেড-ইনডেক্স সর্বোচ্চ সীমা হতে হবে।

Answer 7

<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

"(" # টেস্টপপ ")। পপওভার ({ধারক: '.প্রেমডিভ'})

Answer 8

আপনি যদি কৌণিক ইউআইবি-বুটস্রেপ ব্যবহার করছেন তবে এই সর্বোত্তম সমাধানটি হ'ল ib uibTooltipProvider এর জন্য নির্ভরতা ইনজেকশন ব্যবহার করা, আপনি সমস্ত সরঞ্জামদণ্ডের জন্য ডিফল্টরূপে সরঞ্জামদণ্ড এবং পপওভারগুলির আচরণটি পরিবর্তন করতে পারেন।

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

ib uibTooltipProvider ib uibTooltipPovider এর মাধ্যমে আপনি ডিফল্টরূপে টুলটিপস এবং পপওভারদের আচরণের পদ্ধতিটি পরিবর্তন করতে পারেন; উপরের বৈশিষ্ট্যগুলি সর্বদা প্রাধান্য পায়। নিম্নলিখিত পদ্ধতি উপলব্ধ:

সেটট্রিগারস ( আপত্তি ) (উদাহরণ: open 'ওপেনট্রিগার': 'ক্লোজট ট্রিগার'}) - আপনার নিজের ম্যাপিংয়ের সাথে উপরে উল্লিখিত ডিফল্ট ট্রিগার ম্যাপিংগুলি প্রসারিত করে।

অপশন (আপত্তি) - নির্দিষ্ট সরঞ্জামদণ্ড এবং পপওভার বৈশিষ্ট্যের জন্য একটি সেট ডিফল্ট সরবরাহ করুন। বর্তমানে সি ব্যাজযুক্তগুলি সমর্থন করে।

Answer 9

বহু বছর পরে, তবে আমার মতো অন্যরাও এটি অনুসন্ধান করতে পারে। সমস্ত আপডেট বিবেচনায় নেওয়া, এগুলি সব জাভাস্ক্রিপ্টে সঠিক আরম্ভের বিকল্পগুলির সাথে সমাধান করা যেতে পারে।

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

এই সেটিংস সমস্ত সমস্যার সমাধান করতে পারে। আমার কাছে সরঞ্জামটিপস ঝলকানো ছিল, পৃষ্ঠায় কেবলমাত্র অর্ধেক আইটেমের জন্য মূলত দেখানো, উপর থেকে বামে অবিরতভাবে ঝাঁপিয়ে পড়া, সমস্ত ধরণের বিরক্তি। কিন্তু সেই সেটিংসের সাথে সমস্ত কিছু সমাধান হয়ে যায়। আশা করি এটি দেখার জন্য যে কেউ সাহায্য করবে।

Answer 10

শুধু ব্যবহার করছি

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

বুটস্ট্র্যাপডায়ালগ মডেলে পপওভার প্রদর্শন করার সময় পর্যাপ্ত পরিমাণে হতে পারে না, যা ধারক হিসাবে শরীরকেও ব্যবহার করে এবং উচ্চতর জেড-সূচক রয়েছে।

আমি এই ফিক্সটি নিয়ে এসেছি যা বুটস্ট্রা 3 এর ইন্টার্নাল ব্যবহার করে (2.x / 4.x দিয়ে কাজ নাও করতে পারে) তবে আধুনিক বুটস্ট্র্যাপ ইনস্টলেশনগুলির বেশিরভাগই 3.x are

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);
    }
    // ...
});

এইভাবে বিভিন্ন পপওভারগুলির বিভিন্ন জেড-সূচক থাকতে পারে, কিছুগুলি বুটস্ট্র্যাপডায়ালগ মডেলের অধীনে থাকে, অন্যদিকে এটি শেষ হয়।

Answer 11

আমার ক্ষেত্রে আমাকে পপওভার টেম্পলেট বিকল্পটি ব্যবহার করতে হয়েছিল এবং এইচটিএমএল টেমপ্লেটে আমার নিজস্ব সিএসএস ক্লাস যুক্ত করতে হয়েছিল:

        $("[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;
}

Answer 12

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

Answer 13

  $('[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

Answer 14

পপওভারের সাথে হস্তক্ষেপকারী পিতামাতার উপাদানগুলিতে আপনার যখন কিছু স্টাইল থাকে তখন আপনি একটি কাস্টম ধারক নির্দিষ্ট করতে চান যাতে পরিবর্তে পপওভারের এইচটিএমএল সেই উপাদানটির মধ্যে উপস্থিত হয়।

উদাহরণস্বরূপ বলুন পপওভারের জন্য পিতামাতা হ'ল তারপরে আপনি ব্যবহার করতে পারেন।

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

অন্য ক্ষেত্রে হতে পারে যখন পপওভারটি অন্য কোনও উপাদানের ভিতরে স্থাপন করা হয় এবং আপনি সেই উপাদানটির উপরে পপওভার প্রদর্শন করতে চান, তখন আপনাকে সেই উপাদানটি ডেটা-ধারকটিতে নির্দিষ্ট করতে হবে। উদাহরণস্বরূপ, ধরুন, আমাদের কাছে একটি মডেল-টু হিসাবে আইডি সহ একটি বুটস্ট্র্যাপ মডেলের পপওভার রয়েছে, তারপরে আপনাকে 'ডেটা-ধারক' সেটাকে 'মডেল-টু' করতে হবে।

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

Answer 15

এটি ভেরিয়েবল.লেস-এ জেড-ইনডেক্স মাস্টার তালিকার সাথে করতে পারে। সাধারণভাবে, আপনার ভেরিয়েবল.বিহীন ফাইলটি সঠিক এবং আপ টু ডেট রয়েছে তা নিশ্চিত হন।