আবদ্ধ হওয়ার সময় আমি কীভাবে বুটস্ট্র্যাপ পপওভারগুলিকে বাঁচিয়ে রাখতে পারি?

114

আমি ব্যবহারকারীর তথ্য দেখানো হোভার কার্ড তৈরি করতে বুটস্ট্র্যাপ পপওভার ব্যবহার করছি এবং আমি এটি একটি বোতামের মাউসওভারে ট্রিগার করছি। পপওভারটি নিজেই আড়াল হওয়ার সময় আমি এই পপওভারটিকে বাঁচিয়ে রাখতে চাই, তবে ব্যবহারকারী বোতামের উপর দিয়ে ঘোরানো বন্ধ হওয়ার সাথে সাথে এটি অদৃশ্য হয়ে যায়। কিভাবে আমি এটি করতে পারব?

$('#example').popover({
    html : true,
    trigger : 'manual',
    content : function() {
        return '<div class="box">Popover</div>';
    }
});

$(document).on('mouseover', '#example', function(){
    $('#example').popover('show');
});

$(document).on('mouseleave', '#example', function(){
    $('#example').popover('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>
স্নিপেট প্রসারিত করুন

jquery  twitter-bootstrap  popper.js 
— বিকাশ দেদে
সূত্র
তুমি কি বাঁচিয়ে রাখতে চাও? আমি বোতামের উপর দিয়ে ঘুরে দেখি এবং এটি খোলা থাকে?
— ডেভিড চেজ
প্রশ্নের শেষ লাইনটি পড়ুন
— বিকাশ দেদে

উত্তর:

172

নীচে কোড স্নিপেট সহ পরীক্ষা করুন:

আমার ব্যবহারের মামলার সাথে সামঞ্জস্য করার জন্য ছোট পরিমার্জন (ভিকাশ দ্বারা সরবরাহিত সমাধান থেকে)।

  1. পপওভার বোতামের জন্য হোভার ইভেন্টে পপওভার খুলুন
  2. পপওভার বাক্সের উপরে ঘোরাফেরা করার সময় পপওভারটি উন্মুক্ত রাখুন
  3. পপওভার বোতাম বা পপওভার বাক্সের জন্য মাউসলেভে পপওভার বন্ধ করুন।

$(".pop").popover({
    trigger: "manual",
    html: true,
    animation: false
  })
  .on("mouseenter", function() {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function() {
      $(_this).popover('hide');
    });
  }).on("mouseleave", function() {
    var _this = this;
    setTimeout(function() {
      if (!$(".popover:hover").length) {
        $(_this).popover("hide");
      }
    }, 300);
  });
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <h2 class='text-primary'>Another Great "KISS" Bootstrap Popover example!</h2>
  <p class='text-muted'>KISS = Keep It Simple S....</p>

  <p class='text-primary'>Goal:</p>
  <ul>
    <li>Open popover on hover event for the popover button</li>
    <li>Keep popover open when hovering over the popover box</li>
    <li>Close popover on mouseleave for either the popover button, or the popover box.</li>
  </ul>

  <button type="button" class="btn btn-danger pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME
    </button>
  <br><br>
  <button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME... Again!
    </button><br><br>
  <button type="button" class="btn btn-success pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    Okay one more time... !
    </button>
  <br><br>
  <p class='text-info'>Hope that helps you... Drove me crazy for a while</p>
  <script src="script.js"></script>
</body>

</html>
স্নিপেট প্রসারিত করুন

— OkezieE
সূত্র
এটি নিখুঁতভাবে কাজ করে, আমি লক্ষ্য করেছি যে ;আপনার মধ্যে দ্বিতীয়টি অনুপস্থিত ছিল $(_this).popover("hide")। তবে আপনাকে ধন্যবাদ, এটি এত সহজ এবং পরিষ্কার ছিল!
— scapegoat17
3
এই উত্তরটি আশ্চর্যজনক। বিএস 3 তে মে 2015-তে দুর্দান্ত কাজ করে ^^
— বিকৃত করুন
1
আমি এটি একটি টেবিলে ব্যবহার করেছি এবং আমি container: 'body'বিকল্পগুলিতে যুক্ত করেছি কারণ এটি কোষগুলিকে স্থানান্তরিত করেছিল। দুর্দান্ত উত্তর!
— আলেকজান্ডার ডার্ক
পপওভারটি লুকানো হয়ে যায় যদি আপনি এটি প্রবেশ করেন এবং তারপরে 300 মিমি পূর্বে ট্রিগার উপাদানটিতে ফিরে যান। এটির সমাধানের জন্য, পপওভার এবং এর ট্রিগার দুটি রয়েছে কিনা তা পরীক্ষা করুন: সেটটাইমআউটে লুকানোর আগে এটি হোভার করুন over আমি ফ্লিটরিং ঠিক করতে পপওভার নিজেই মাউসলেভে সেটটাইমআউট এবং একই পদ্ধতির ব্যবহার করব।
— rzb
animation:falseঝাঁকুনি ঠিক করতে সেট করতে ভুলবেন না - উপরে উল্লিখিত প্লঙ্কার লিঙ্কটি দেখুন। এটি আমার পক্ষে পুরোপুরি কাজ করে।
— ওকেজিই
84

আমি এর অন্য একটি সমাধানের পরে এসেছি ... এখানে কোড দেওয়া আছে

    $('.selector').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'top',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });
— বিকাশ দেদে
সূত্র
6
এটি যোগ করতে গুরুত্বপূর্ণ animation: falseঅন্যথায় লিংক উপর মাউস চলন্ত বারবার এটা সঠিকভাবে কাজ নাও কারণ হবে
— jasop
5
আপনার কোড @ ভাইকাসে আমার ছোট্ট একটি পরিবর্তন হয়েছে ( gist.github.com/Nitrodist/7913848 )। এটি 50 মিমির পরে শর্তটি পুনরুদ্ধার করে যাতে এটি খোলা থাকে না। এটি হ'ল এটি প্রতি 50 মিমি অবিরত এটি পুনরুদ্ধার করে।
— নাইট্রোডিস্ট
2
এটি কীভাবে এটি রূপান্তর করতে পারে তাই এটি ডকুমেন্টে কেবল যুক্ত হওয়া লাইভ উপাদানগুলিতে কাজ করে?
— উইলিয়ামসোভেন
28

এখানে আমার গ্রহণ: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

কখনও কখনও পপওভার ট্রিগার থেকে বাস্তব পপওভার সামগ্রীতে তির্যকভাবে সরানোর সময় , আপনি নীচের উপাদানগুলিতে ঘুরে দেখেন । আমি এই ধরনের পরিস্থিতিগুলি পরিচালনা করতে চেয়েছিলাম - যতক্ষণ না আপনি সময়সীমা অগ্নিকাণ্ডের আগে পপওভার সামগ্রীতে পৌঁছাবেন আপনি নিরাপদ (পপওভারটি অদৃশ্য হবে না)। এটি delayবিকল্প প্রয়োজন ।

এই হ্যাকটি মূলত পপওভার leaveফাংশনকে ওভাররাইড করে তবে মূলটিকে কল করে (যা পপওভারটি আড়াল করতে টাইমার শুরু করে)। তারপরে এটি mouseenterসামগ্রীর উপাদানগুলির পপওভার করার জন্য এক-শ্রোতাকে সংযুক্ত করে ।

যদি মাউস পপওভারটিতে প্রবেশ করে তবে টাইমারটি সাফ হয়ে যায়। তারপরে এটি mouseleaveপপওভারে শোনার প্রবণতা ঘটাচ্ছে এবং যদি এটি ট্রিগার হয় তবে এটি আসল ছুটির ফাংশনটিকে কল করে যাতে এটি লুকিয়ে টাইমারটি শুরু করতে পারে।

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};
— ওয়াজটেক ক্রুসজেউস্কি
সূত্র
5
container = self.$tip;এইভাবে ব্যবহার করে ধারকটি সন্ধান করা উন্নত হতে পারে , containerসম্পত্তি সেট করা অবস্থায় পপওভারটি পাওয়া যাবে । এখানে একটি ঝাঁকুনি
— dbroeks
3
@ স্পেরেল আমি @ ওয়াজটেক_ ক্রুসজেউসকি'র ফিডলের কাঁটাচামচায় এই সমস্যাটি সমাধান করেছি: jsfiddle.net/HugeHugh/pN26d কলটিif (!thisTip.is(':visible')) করার আগে যে অংশটি পরীক্ষা করে দেখেছেoriginalShow()
— এইচ ডগ
1
যদি পপওভারটি বিকল্পের সাথে শুরু করা হয় তবে container: 'body',এই সমাধানটি প্রত্যাশার মতো কাজ করবে না। ভেরিয়েবলটি containerপ্রতিস্থাপন করা দরকার self.$tip। : আরো বিস্তারিত জানার জন্য আমার উত্তর চেক করুন stackoverflow.com/a/28731847/439427
— রুবেনস Mariuzzo
1
উজ্জ্বল। এটি অন্যান্য উত্তরের পরিবর্তে 'নির্বাচক' প্যারামিটার ব্যবহার করার জন্য কাজ করে।
— জেটলেজ
1
এখানে একটি উন্নত সংস্করণ রয়েছে যা টিপটি রেখে এবং টিপতে প্রবেশের সময় ত্রুটিটি
— জোল্টন
14

আমি মনে করি একটি সহজ উপায় এটি হবে:

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

এইভাবে পপওভারটি লক্ষ্য উপাদানটির ভিতরে তৈরি হয়। সুতরাং যখন আপনি নিজের মাউসটিকে পপওভারের উপরে সরান, এটি এখনও উপাদানটির উপরে চলে যায়। বুটস্ট্র্যাপ 3.3.2 এটির সাথে ভাল কাজ করে। পুরানো সংস্করণ অ্যানিমেশন নিয়ে কিছু সমস্যা থাকতে পারে, তাই আপনি "অ্যানিমেশন: মিথ্যা" অক্ষম করতে চাইতে পারেন

— Cu Lý
সূত্র
আমি জানি যে এই থ্রেডটি পুরানো, তবে এটি আমার মতে সেরা, পরিষ্কার সমাধান এবং এটি উচ্চতর হওয়া উচিত। কেবলমাত্র সতর্কতা হ'ল এটি ভেঙে যাবে, যদি আপনি ট্রিপ উপাদানটি থেকে "দূরে" পপওভারটি অবস্থান করেন। তবে যতক্ষণ না উভয়ের মধ্যে দূরত্ব শূন্য হয় (যেমন তারা ওভারল্যাপ করে), এটি সুন্দরভাবে কাজ করে এবং কোনও কাস্টম জেএসের প্রয়োজন হয় না। ধন্যবাদ!
— জনগ্যাল্ট
এটি এ পর্যন্ত সেরা, পরিষ্কার, সহজ সমাধান। উচ্চতর স্থান করা উচিত! আমি delay: { "hide": 400 }লুকানোর আগে কিছুটা বিলম্ব যোগ করেছি এবং এটি দুর্দান্ত কাজ করে! 👍
— কুরস করুন
14

আমি ট্রিগার সেট ব্যবহার করা hoverএবং ধারক সেট দিয়েছেন #elementএবং পরিশেষে একটি বসানো যোগ boxকরার right।

এটি আপনার সেটআপ হওয়া উচিত:

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});

এবং #exampleCSS চাহিদা position:relative;পরীক্ষা নিচে jsfiddle:

https://jsfiddle.net/9qn6pw4p/1/

সম্পাদিত

এই বেহালার উভয় লিঙ্ক আছে কোন সমস্যার সঙ্গে যে কাজ http://jsfiddle.net/davidchase03/FQE57/4/

— ডেভিড চেজ
সূত্র
হুম কাজ করে, আমি contentসার্ভার দিক থেকে বিষয়বস্তু নিতে বিকল্পটিতে জকিউরি এজ্যাক্স ব্যবহার করতে পারি..এই কাজটি করতে বা তার জন্য আমার কিছু অতিরিক্ত কাজ করতে হবে
— বিকাশ ডেড
@ ভিকাসদেবদেহে হ্যাঁ আপনি ajaxসামগ্রীতে ব্যবহার করতে পারেন তবে কাজ করার জন্য আপনার সেটআপ করা দরকার ... দয়া করে উত্তরটি সঠিকভাবে চিহ্নিত করুন যদি এটি আপনার সমাধান হয় OP... তবে অন্যরা উপকৃত হতে পারেন
— ডেভিড চেস
তবে আমরা যদি লিঙ্কটি নিজেই ধারক হিসাবে ব্যবহার করি তবে পুরো পপওভারটি একটি লিঙ্ক হয়ে যায় .... চেষ্টা করে দেখুন
— vikas devde
আপনি যদি বাক্সের ভিতরে কোনও লিঙ্ক রাখেন তবে এটি এখনও লিংক করবে .. সঠিক?
— ডেভিড চেজ
2
আমার জন্য জিসফিলের কোনও কাজই নয়। ক্রোম মার্চ 20 2014.
— pferrel
7

নেট এর আশেপাশে অন্যান্য বিটের সাহায্যে বুটস্ট্র্যাপ পপওভার দিয়ে আমি এভাবেই করেছি। গতিশীলভাবে সাইটে প্রদর্শিত মরা বিভিন্ন পণ্য থেকে শিরোনাম এবং বিষয়বস্তু পাওয়া যায়। প্রতিটি পণ্য বা পপওভার অনন্য আইডি পায়। পণ্য (। এই। পপ) বা পপওভার থেকে বেরিয়ে যাওয়ার সময় পপওভার অদৃশ্য হয়ে যাবে। টাইমআউট ব্যবহৃত হয় যেখানে পপওভারের পরিবর্তে পণ্যটির মধ্য দিয়ে প্রস্থান করা পর্যন্ত পপওভার প্রদর্শিত হবে।

$(".pop").each(function () {
        var $pElem = $(this);
        $pElem.popover(
            {
                html: true,
                trigger: "manual",
                title: getPopoverTitle($pElem.attr("id")),
                content: getPopoverContent($pElem.attr("id")),
                container: 'body',
                animation:false
            }
        );
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        console.log("mouse entered");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 100);
    });
    function getPopoverTitle(target) {
        return $("#" + target + "_content > h3.popover-title").html();
    };

    function getPopoverContent(target) {
        return $("#" + target + "_content > div.popover-content").html();
    };
— hoektoe
সূত্র
পপওভার লক্ষ্য উপাদানটির শিশু না হলে এটিও কাজ করবে। +1
— তাহা পাকসু
6

এখানে আমি এমন একটি সমাধান প্রস্তুত করেছি যা দেখে মনে হয় যে এটি কার্যকরভাবে কাজ করবে এবং আপনাকে সমস্ত পপওভারগুলি চালু করার জন্য আপনাকে সাধারণ বুটস্ট্র্যাপ বাস্তবায়ন ব্যবহার করার অনুমতি দেয়।

আসল ফিডল: https://jsfiddle.net/eXpressive/hfear592/

এই প্রশ্নে পোর্ট করা:

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({
    html : true,
    trigger : 'hover',
    content : function() {
        return '<div class="box"></div>';
    }
}).on('hide.bs.popover', function () {
    if ($(".popover:hover").length) {
      return false;
    }                
}); 

$('body').on('mouseleave', '.popover', function(){
    $('.popover').popover('hide');
});
— eXpressiveDesign
সূত্র
2

আমি সম্মত হই যে সর্বোত্তম উপায় হ'ল প্রদত্ত একটিকে ব্যবহার করা: ডেভিড চেজ , কি ল্য এবং অন্যরা যা করার সহজ উপায় হ'ল container: $(this)সম্পত্তিটি নীচে ব্যবহার করা :

$(selectorString).each(
  var $this = $(this);
  $this.popover({
    html: true,
    placement: "top",
    container: $this,
    trigger: "hover",
    title: "Popover",
    content: "Hey, you hovered on element"
  });
);

আমি এখানে উল্লেখ করতে চাই যে এই ক্ষেত্রে পপওভার বর্তমান উপাদানটির সমস্ত বৈশিষ্ট্যের উত্তরাধিকারী হবে । সুতরাং, উদাহরণস্বরূপ, আপনি যদি কোনও .btnউপাদান (বুটস্ট্র্যাপ) এর জন্য এটি করেন তবে পপওভারের ভিতরে আপনি পাঠ্য নির্বাচন করতে পারবেন না । কেবল এটি রেকর্ড করতে চেয়েছিলাম যেহেতু আমি বেশ কিছুটা সময় ব্যয় করেছি এই বিষয়ে মাথা ঠাট্টা করার জন্য।

— forumulator
সূত্র
1

বিকাশ উত্তর আমার পক্ষে নিখুঁতভাবে কাজ করে, এখানে আমি বিলম্বের জন্য সমর্থনও প্রদর্শন করব (দেখান / লুকিয়ে রাখুন)।

var popover = $('#example');
var options = {
    animation : true,
    html: true,
    trigger: 'manual',
    placement: 'right',
    delay: {show: 500, hide: 100}
};   
popover
    .popover(options)
    .on("mouseenter", function () {

        var t = this;
        var popover = $(this);    
        setTimeout(function () {

            if (popover.is(":hover")) {

                popover.popover("show");
                popover.siblings(".popover").on("mouseleave", function () {
                    $(t).popover('hide');
                });
            }
        }, options.delay.show);
    })
    .on("mouseleave", function () {
        var t = this;
        var popover = $(this);

        setTimeout(function () {
            if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {
                $(t).popover("hide")
            }
        }, options.delay.hide);
    });

আমি দয়া করে মনোযোগ দিন:

if (!$(".popover:hover").length) {

সঙ্গে:

if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {

যাতে এটি খোলা পপওভারে হুবহু রেফারেন্স দেয় এবং অন্য কোনও নয় (এখন থেকে, বিলম্বের মধ্য দিয়ে, একই সময়ে 1 টিরও বেশি খোলা হতে পারে)

— user1993198
সূত্র
— ধারকটি
1

নির্বাচিত উত্তরটি কাজ করে তবে পটওভারটি bodyধারক হিসাবে আরম্ভ করা হলে ব্যর্থ হবে ।

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

নির্বাচিত উত্তরের ভিত্তিতে একটি সমাধান হ'ল নীচের কোড যা পপওভার ব্যবহারের আগে স্থাপন করা দরকার needs

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj) {
    var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
    originalLeave.call(this, obj);

    if (obj.currentTarget) {
        self.$tip.one('mouseenter', function() {
            clearTimeout(self.timeout);
            self.$tip.one('mouseleave', function() {
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        })
    }
};

self.$tipপপওভার সর্বদা উপাদানটির সহোদর হওয়ার প্রত্যাশা করে ডিওএমকে অনুসরণ করার পরিবর্তে পরিবর্তনটি নূন্যতম হয় ।

— রুবেনস মারিউজো
সূত্র
0

টুলটিপসের জন্য একই জিনিস:

আমার জন্য নিম্নলিখিত সমাধানগুলি কাজ করে কারণ এটি প্রতিটি 'মাউসেন্টার'-এ ইভেন্ট শ্রোতাদের যুক্ত করে না এবং এটি টুলটিপ উপাদানটিতে ফিরিয়ে নেওয়া সম্ভব যা সরঞ্জামদণ্ডটি টিকে রাখে।

$ ->

  $('.element').tooltip({
    html: true,
    trigger: 'manual'
  }).
  on 'mouseenter', ->
    clearTimeout window.tooltipTimeout
    $(this).tooltip('show') unless $('.tooltip:visible').length > 0
  .
  on 'mouseleave', ->
    _this = this
    window.tooltipTimeout = setTimeout ->
      $(_this).tooltip('hide')
    , 100

$(document).on 'mouseenter', '.tooltip', ->
  clearTimeout window.tooltipTimeout

$(document).on 'mouseleave', '.tooltip', ->
  trigger = $($(this).siblings('.element')[0])
  window.tooltipTimeout = setTimeout ->
    trigger.tooltip('hide')
  , 100
— phlppn
সূত্র
0

এই সমাধানটি আমার পক্ষে ভাল কাজ করেছে: (এখন এটির বুলেটপ্রুফ) ;-)

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: 'manual',
        animation: false,
        html: true,
        title: function () {
            return $(this).parent().find('.thumbPopover > .title').html();
        },
        content: function () {
            return $(this).parent().find('.thumbPopover > .body').html();
        },
        container: 'body',
        placement: 'auto'
    }).on("mouseenter",function () {
        var _this = this; // thumbcontainer

        console.log('thumbcontainer mouseenter')
        // clear the counter
        clearTimeout(counter);
        // Close all other Popovers
        $('.thumbcontainer').not(_this).popover('hide');

        // start new timeout to show popover
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $('.thumbcontainer').popover('hide');
            });
        }, 400);

    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(this).is(':hover'))
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}
— জোহানেস ফেরনার
সূত্র
0 
        $(function() {
            $("[data-toggle = 'popover']").popover({
                placement: 'left',
                html: true,
                trigger: "  focus",
            }).on("mouseenter", function() {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function() {
                    $(_this).popover('hide');
                });
            }).on("mouseleave", function() {
                var _this = this;
                setTimeout(function() {
                    if (!$(".popover:hover").length) {
                        $(_this).popover("hide")
                    }
                }, 100);
            });
        });
— দীনেশ সারাক
সূত্র
0

আমি দেখতে পেলাম যে mouseleaveঅদ্ভুত কিছু ঘটে যখন উইন্ডো ফোকাস হঠাৎ পরিবর্তিত হয়, তারপরে ব্যবহারকারী ব্রাউজারে ফিরে আসে। এরকম ক্ষেত্রে,mouseleave কার্সারটি না গিয়ে এবং উপাদানটিকে আবার না ফেলে দেওয়া পর্যন্ত কখনই গুলি চালানো হবে না।

এই সমাধানটি আমি অবজেক্টের mouseenterউপর নির্ভর করে নিয়ে এসেছি window, সুতরাং পৃষ্ঠার অন্য কোথাও মাউস সরানো হলে তা অদৃশ্য হয়ে যায় ।

এটি পৃষ্ঠায় একাধিক উপাদান থাকার সাথে কাজ করার জন্য ডিজাইন করা হয়েছিল যা এটি ট্রিগার করবে (কোনও টেবিলের মতো)।

var allMenus = $(".menus");
allMenus.popover({
    html: true,
    trigger: "manual",
    placement: "bottom",
    content: $("#menuContent")[0].outerHTML
}).on("mouseenter", (e) => {
    allMenus.not(e.target).popover("hide");
    $(e.target).popover("show");
    e.stopPropagation();
}).on("shown.bs.popover", () => {
    $(window).on("mouseenter.hidepopover", (e) => {
        if ($(e.target).parents(".popover").length === 0) {
            allMenus.popover("hide");
            $(window).off("mouseenter.hidepopover");
        }
    });
});
— গ্যাব্রিয়েল লুসি
সূত্র
0

এটি এর সাথে আরও নমনীয় হবে hover():

$(".my-popover").hover(
    function() {  // mouse in event
        $this = $(this);
        $this.popover({
            html: true,
            content: "Your content",
            trigger: "manual",
            animation: false
            });
        $this.popover("show");
        $(".popover").on("mouseleave", function() {
            $this.popover("hide");
        });
    },
    function() {  // mouse out event
        setTimeout(function() {
            if (!$(".popover:hover").length) {
                $this.popover("hide");
            }
        }, 100);
    } 
)
— ধূসর লি
সূত্র
0

সাধারণ :)

$('[data-toggle="popover"]').popover( { "container":"body", "trigger":"focus", "html":true });
$('[data-toggle="popover"]').mouseenter(function(){
    $(this).trigger('focus');
});
— edmc73
সূত্র
0

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

var options = {
                delay: { show: 1000, hide: 50 },
                trigger: 'manual',                      
                html: true
            };
var $popover = $(element).popover(options);

$popover.on('mouseenter', function () { // This is entering the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'in';

    self.timeout = setTimeout(function () {
        if (self.hoverState == 'in') {
            $(self).popover("show");

            $(".popover, .popover *").on('mouseover', function () { // This is moving over the popover
                clearTimeout(self.timeout);
            });                                                                 

            $(".popover").on('mouseleave', function () { // This is leaving the popover
                self.timeout = setTimeout(function () {
                    if (self.hoverState == 'out') {
                        $(self).popover('hide');
                    }
                }, options.delay.hide);
            });
        }
    }, options.delay.show);
}).on('mouseleave', function (event) { // This is leaving the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'out';

    self.timeout = setTimeout(function () {                             
        if (self.hoverState == 'out') {
            $(self).popover('hide');
        }

    }, options.delay.hide);
});
— জারথোস্ট বোম্যান
সূত্র
-1

এটি অজ্যাক্স দ্বারা দেরী এবং লোড সহ শো গতিশীলতার সরঞ্জামদণ্ডগুলির জন্য আমার কোড।

$(window).on('load', function () {
    generatePopovers();
    
    $.fn.dataTable.tables({ visible: true, api: true }).on('draw.dt', function () {
        generatePopovers();
    });
});

$(document).ajaxStop(function () {
    generatePopovers();
});
স্নিপেট প্রসারিত করুন

function generatePopovers() {
var popover = $('a[href*="../Something.aspx"]'); //locate the elements to popover

popover.each(function (index) {
    var poplink = $(this);
    if (poplink.attr("data-toggle") == null) {
        console.log("RENDER POPOVER: " + poplink.attr('href'));
        poplink.attr("data-toggle", "popover");
        poplink.attr("data-html", "true");
        poplink.attr("data-placement", "top");
        poplink.attr("data-content", "Loading...");
        poplink.popover({
            animation: false,
            html: true,
            trigger: 'manual',
            container: 'body',
            placement: 'top'
        }).on("mouseenter", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (thispoplink.is(":hover")) {
                    thispoplink.popover("show");
                    loadDynamicData(thispoplink); //load data by ajax if you want
                    $('body .popover').on("mouseleave", function () {
                        thispoplink.popover('hide');
                    });
                }
            }, 1000);
        }).on("mouseleave", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (!$("body").find(".popover:hover").length) {
                    thispoplink.popover("hide");
                }
            }, 100);
        });
    }
});
স্নিপেট প্রসারিত করুন

function loadDynamicData(popover) {
    var params = new Object();
    params.somedata = popover.attr("href").split("somedata=")[1]; //obtain a parameter to send
    params = JSON.stringify(params);
    //check if the content is not seted
    if (popover.attr("data-content") == "Loading...") {
        $.ajax({
            type: "POST",
            url: "../Default.aspx/ObtainData",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (data) {
                console.log(JSON.parse(data.d));
                var dato = JSON.parse(data.d);
                if (dato != null) {
                    popover.attr("data-content",dato.something); // here you can set the data returned
                    if (popover.is(":hover")) {
                        popover.popover("show"); //use this for reload the view
                    }
                }
            },

            failure: function (data) {
                itShowError("- Error AJAX.<br>");
            }
        });
    }
}
স্নিপেট প্রসারিত করুন

— giuliano
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.