ट्विटर बूटस्ट्रैप 2.3.2 पॉपओवर

Question

होवर करते समय खुला रहता है मेरे पास एक निचला उन्मुख पॉपओवर है जो मैं डिफ़ॉल्ट पॉपओवर की तुलना में थोड़ा अधिक क्षमा करना चाहता हूं, जैसे ही माउस ट्रिगर छोड़ देता है।

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

मैं जब तक खोलने के रूप में माउस ट्रिगर या पॉपओवर सामग्री खत्म हो गया है रहने के लिए मिल गया है, लेकिन यह है कि उपयोगकर्ता के लिए कठिन है, क्योंकि वे तीर करने के लिए ट्रिगर तत्व से माउस को मिल गया है पॉपओवर के साथ बातचीत करने के लिए उन क्षेत्रों को छोड़ दिए बिना सामग्री के लिए। दिमाग में दो समाधान, न तो काम कर रहे हैं:

1) देरी विकल्प को ऐसा करना चाहिए। delay: {hide: 500} पॉपओवर कॉल में माउस के पत्तों के बाद पॉपओवर खुला छोड़ देता है, लेकिन ट्रिगर एटीएम या पॉपओवर को गायब होने से पहले फिर से दर्ज करना पॉपअप को खोलने के लिए बूटस्ट्रैप नहीं बताता है, इसलिए शुरुआती टाइमआउट के अंत में चला जाता है ।

2) तीर के तत्व को विस्तृत करें ताकि माउस ट्रिगर तत्व और पॉपओवर के बीच पॉपओवर कार्यों के बीच ट्रिगर तत्व से पृष्ठभूमि में जा सके (माउस तब ट्रिगर/तत्व को कभी नहीं छोड़ेगा)। तीर छोड़कर निम्न काम करता है सीएसएस सीमाओं ओवरलैपिंग के साथ तैयार की है, इसलिए पृष्ठभूमि पारदर्शी नहीं है: http://jsfiddle.net/HAZS8/

.popover.bottom .arrow { 
    left: 0%; 
    padding-left:50%; 
    padding-right:50%; 
} 

वैकल्पिक हल कड़ी मेहनत से तार करने के लिए माउसओवर और jQuery के साथ घटनाओं mouseleave, या अतिव्यापी-सीमाओं को बदलने के लिए एक छवि के साथ तीर। बेहतर सुधार?

Answer 1

आप पॉपओवर के लिए show और hide घटनाओं संभाल कर सकते हैं:

$('#example').popover({ 
    html: true, 
    trigger: 'hover', 
    container: '#example', 
    placement: 'bottom', 
    content: function() { 
     return '<div class="box">here is some content</div>'; 
    }, 
    animation: false 
}).on({ 
    show: function (e) { 
     var $this = $(this); 

     // Currently hovering popover 
     $this.data("hoveringPopover", true); 

     // If it's still waiting to determine if it can be hovered, don't allow other handlers 
     if ($this.data("waitingForPopoverTO")) { 
      e.stopImmediatePropagation(); 
     } 
    }, 
    hide: function (e) { 
     var $this = $(this); 

     // If timeout was reached, allow hide to occur 
     if ($this.data("forceHidePopover")) { 
      $this.data("forceHidePopover", false); 
      return true; 
     } 

     // Prevent other `hide` handlers from executing 
     e.stopImmediatePropagation(); 

     // Reset timeout checker 
     clearTimeout($this.data("popoverTO")); 

     // No longer hovering popover 
     $this.data("hoveringPopover", false); 

     // Flag for `show` event 
     $this.data("waitingForPopoverTO", true); 

     // In 1500ms, check to see if the popover is still not being hovered 
     $this.data("popoverTO", setTimeout(function() { 
      // If not being hovered, force the hide 
      if (!$this.data("hoveringPopover")) { 
       $this.data("forceHidePopover", true); 
       $this.data("waitingForPopoverTO", false); 
       $this.popover("hide"); 
      } 
     }, 1500)); 

     // Stop default behavior 
     return false; 
    } 
}); 

डेमो:http://jsfiddle.net/L4Hc2/

यह वहाँ में निर्मित कार्यक्षमता के लिए पॉपओवर के लिए कुछ भी नहीं है की तरह प्रतीत नहीं होता है आप चाहते हैं, तो यही वह है जो मैं आया था :)

क्या अच्छा है कि यह केवल हैंडलर को निष्पादित करने की अनुमति देता है अगर उन्हें वास्तव में करना चाहिए - यदि पॉपओवर वास्तव में छुपाया जा रहा है या वास्तव में दिखाया जा रहा है। इसके अलावा, एक पॉपओवर का प्रत्येक उदाहरण एक दूसरे से अद्वितीय है, इसलिए कोई वैश्विक चाल चल रही नहीं है।

Answer 2

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

(function($) { 

    var oldHide = $.fn.popover.Constructor.prototype.hide; 

    $.fn.popover.Constructor.prototype.hide = function() { 
     if (this.options.trigger === "hover" && this.tip().is(":hover")) { 
      var that = this; 
      // try again after what would have been the delay 
      setTimeout(function() { 
       return that.hide.call(that, arguments); 
      }, that.options.delay.hide); 
      return; 
     } 
     oldHide.call(this, arguments); 
    }; 

})(jQuery); 

लोड इस & jQuery स्रोतों अपने बूटस्ट्रैप के बाद।