हॉवर किए जाने के दौरान मैं बूटस्ट्रैप आबादी को कैसे जीवित रख सकता हूं?

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

— vikas devde
स्रोत

आप जीवित रखना चाहते हैं? मैं बटन पर मंडराना और यह खुला रहा?

— डेविड चेस

प्रश्न की अंतिम पंक्ति पढ़ें

— vikas devde

172

नीचे कोड स्निपेट के साथ टेस्ट करें:

मेरे उपयोग के मामले के अनुरूप छोटे संशोधन (विकारों द्वारा प्रदान किए गए समाधान से)।

पॉपओवर बटन के लिए होवर इवेंट पर ओपन पॉपओवर
पॉपओवर बॉक्स पर मँडराते समय पॉपओवर खुला रखें
पॉपओवर बटन, या पॉपओवर बॉक्स के लिए माउसलेव पर बंद पॉपओवर।

$(".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")। लेकिन धन्यवाद, यह इतना सरल और साफ था!

— बलि का बकरा

3

यह उत्तर आश्चर्यजनक है। BS3 पर महान काम करता है मई 2015 के रूप में ^ ^

— पतन

1

मैंने इसे एक तालिका में उपयोग किया और मैंने container: 'body'विकल्पों में जोड़ा क्योंकि यह कोशिकाओं को स्थानांतरित कर देता है। बहुत बढ़िया जवाब!

— अलेक्जेंडर डर्क

यदि आप इसे दर्ज करते हैं तो पॉपओवर छिप जाता है और फिर 300ms से पहले सभी ट्रिगर तत्व पर वापस चला जाता है। इसे ठीक करने के लिए, जांच लें कि क्या बीओटीएच पॉपओवर और उसका ट्रिगर हैं: इसे सेटटाइमआउट में छिपाने से पहले होवर करें। मैं भी झपट्टा ठीक करने के लिए, सेटओवरआउट और पॉपुलेव पर एक ही दृष्टिकोण का उपयोग करता हूँ।

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

— vikas devde
स्रोत

6

यह जोड़ने के लिए महत्वपूर्ण है animation: falseअन्यथा लिंक पर माउस को बार-बार हिलाने से यह सही ढंग से काम नहीं कर पाएगा

— jasop

5

मेरे पास आपके कोड @vikas ( gist.github.com/Nitrodist/7913848 ) का एक छोटा संशोधन है । यह 50ms के बाद की स्थिति को फिर से जाँचता है ताकि यह खुले में न रहे। यही है, यह लगातार हर 50ms पर इसे रीचेक करता है।

— नाइट्रोडिस्ट

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प्रॉपर्टी सेट होने पर पॉपओवर भी मिल सकता है। यहाँ एक

— फिडेल है

3

@pferrel मैंने इस मुद्दे को हल किया है @ fortek_Kruszewski के मेरे कांटे में: fs: jsfiddle.net/HugeHugh/pN26d उस भाग को देखें जो if (!thisTip.is(':visible'))कॉल करने से पहले चेक करता हैoriginalShow()

— H Dog

1

यदि पॉपओवर को विकल्प के साथ आरंभ किया जाता है तो container: 'body',यह समाधान अपेक्षित रूप से काम नहीं करेगा। चर containerको साथ बदलने की जरूरत है self.$tip। अधिक जानकारी के लिए मेरे जवाब की जाँच करें: stackoverflow.com/a/28731847/439427

— Rubens Mariuzzo

1

प्रतिभाशाली। अन्य उत्तरों के विपरीत 'चयनकर्ता' पैरामीटर का उपयोग करते समय यह काम करता है।

— जेटलीज

1

यहाँ एक उन्नत संस्करण है जो टिप को छोड़ते समय एक बग को ठीक करता है और टिप को फिर भी गर्म करता है और परिदृश्य को भी ठीक करता है जब टिप शरीर से जुड़ी होती है jsfiddle.net/Zf3m7/1499

— Zoltán Tamáv

14

मुझे लगता है कि यह एक आसान तरीका होगा:

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

इस तरह टारगेट एलिमेंट के अंदर ही पॉपओवर बनाया जाता है। इसलिए जब आप अपने माउस को पॉपओवर पर ले जाते हैं, तब भी वह तत्व के ऊपर होता है। बूटस्ट्रैप 3.3.2 इस के साथ अच्छी तरह से काम करता है। पुराने संस्करण में एनीमेशन के साथ कुछ समस्याएं हो सकती हैं, इसलिए आप "एनीमेशन: गलत" को अक्षम करना चाहते हैं

— Cu Lý
स्रोत

मुझे पता है कि यह धागा पुराना है, लेकिन यह मेरी राय में सबसे अच्छा, सबसे साफ समाधान है और इसे उच्च स्थान पर रखा जाना चाहिए। एकमात्र चेतावनी यह है कि यह टूट जाएगा, यदि आप ट्रिगर तत्व से "दूर" पॉपओवर (एक अजीब तरीके से) की स्थिति बनाते हैं। लेकिन जब तक दोनों के बीच की दूरी शून्य है (जैसे वे ओवरलैप करते हैं), यह खूबसूरती से काम करता है और किसी भी कस्टम जेएस की आवश्यकता नहीं है। धन्यवाद!

— JohnGalt

यह अब तक का सबसे अच्छा, स्वच्छ, सबसे आसान उपाय है। उच्च स्थान पर होना चाहिए! मैंने delay: { "hide": 400 }छिपाने से पहले कुछ देरी जोड़ दी और यह बहुत अच्छा काम करता है! 👍

— coorasse

14

मैं करने के लिए ट्रिगर सेट का इस्तेमाल किया hoverऔर करने के लिए कंटेनर सेट दिया #elementऔर अंत में की एक प्लेसमेंट जोड़ने boxके लिए right।

यह आपका सेटअप होना चाहिए:

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

और #exampleसीएसएस को position:relative;नीचे दिए गए jsfiddle की जांच करनी चाहिए:

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

संपादित

इस फिडल में दोनों लिंक हैं जो बिना किसी समस्या के काम करते हैं http://jsfiddle.net/davidchase03/FQEn/4//

— डेविड चेस
स्रोत

हम्म जो काम करता है, क्या मैं contentसर्वर की तरफ से सामग्री लेने के लिए विकल्प में jquery ajax का उपयोग कर सकता हूं..क्या वह काम या मुझे इसके लिए कुछ अतिरिक्त काम करने की आवश्यकता है

— vikas devde

@vikasdevde हाँ आप ajaxसामग्री में उपयोग कर सकते हैं , लेकिन इसके लिए आपको काम करने के लिए सेटअप करने की आवश्यकता है ... कृपया उत्तर को सही चिह्नित करें यदि यह आपके हल करता है OP.. तो अन्य लाभान्वित हो सकते हैं

— डेविड चेस

लेकिन अगर हम लिंक को कंटेनर के रूप में उपयोग करते हैं तो पूरी

— आबादी

यदि आप बॉक्स के अंदर एक लिंक डालते हैं तो यह अभी भी लिंक करेगा .. सही है?

— डेविड चेस

2

मेरे लिए jsfiddle का कोई भी काम नहीं। क्रोम मार 20 2014.

— pferrel

7

यह मैंने नेट के आसपास अन्य बिट्स की मदद से बूटस्ट्रैप पॉपओवर के साथ किया। डायनामिक रूप से साइट पर प्रदर्शित मरने वाले विभिन्न उत्पादों से शीर्षक और सामग्री मिलती है। प्रत्येक उत्पाद या पॉपओवर को अद्वितीय आईडी मिलती है। उत्पाद से बाहर निकलने पर पॉपओवर गायब हो जाएगा ($ .pop) या पॉपओवर। टाइमआउट का उपयोग किया जाता है, जहां पॉपओवर के बजाय उत्पाद के माध्यम से बाहर निकलने तक पॉपओवर प्रदर्शित किया जाएगा।

$(".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

मैं मानता हूं कि सबसे अच्छा तरीका यह है कि डेविड चेस , Cu Ly, और अन्य लोगों द्वारा उपयोग किया जाने वाला तरीका है कि ऐसा करने का सबसे सरल तरीका 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
स्रोत

अंत में मैंने जो टिप्पणी की, वह वास्तव में कंटेनर का उपयोग करते समय सही नहीं है: शरीर, अगर अभी भी उस एक लाइन के लिए विकास के समाधान का उपयोग करना है

— user1993198

1

चुने हुए उत्तर काम करता है, लेकिन अगर पॉपओवर को bodyकंटेनर के साथ शुरू किया जाता है तो वह विफल हो जाएगा ।

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

चुने हुए उत्तर के आधार पर एक समाधान निम्नलिखित कोड है जिसे पॉपओवर का उपयोग करने से पहले रखा जाना चाहिए।

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