jQuery UI स्लाइडर

Question

के लिए डायनामिक ट्विटर बूटस्ट्रैप टूलटिप्स ट्विटर स्लाइडर टूलटिप का उपयोग कर प्रत्येक jQuery यूआई स्लाइडर हैंडलर के शीर्ष पर टूलटिप कैसे जोड़ सकता है जो उपयोगकर्ता स्लाइड के रूप में गतिशील रूप से बदलता है?

मैं इसके साथ आता हूं लेकिन यह चिकना नहीं है और कभी-कभी टूलटिप गायब हो जाता है और स्थिर नहीं होता है। दूसरे शब्दों में, यह वास्तव में अच्छी तरह से काम नहीं करता है।

$("#mySlider").slider({ 
    range: true, 
    step: 5, 
    min: 100, 
    max: 500, 
    values: [150, 300], 
    slide: function(event, ui){ 
     $('.ui-slider-handle').tooltip('show');   
    } 
}); 

$('.ui-slider-handle').attr('title', 'test').tooltip({trigger:'manual'}); 

Answer 1

आपका टूलटिप गायब हो जाता है और flickers वजह से है कि क्या प्लगइन डिजाइन किया गया था भी, तो बजाय बूटस्ट्रैप प्लगइन ही (जो मेरे लिए इस कार्य के लिए संशोधित करने के लिए एक दर्द हो सकता है) का उपयोग करने के लिए, आप बस का उपयोग कर सकते है अपने मार्कअप और सीएसएस और jQueryUI के भीतर इसे पुनर्निर्माण करें। उदाहरण के लिए इस प्रयास करें:

जे एस

slide: function(event, ui) { 
     $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>'); 
     $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>'); 
} 

इस विधि का उपयोग हम अपने ही वर्ग के साथ-साथ बूटस्ट्रैप टूलटिप के रूप में ही सीएसएस का उपयोग करता है प्रत्येक स्लाइडर संभाल के शीर्ष पर टूलटिप के पुनर्निर्माण कर सकते हैं कि हम कर सकते हैं इसे स्थिति में आसानी से संशोधित करें। इसलिए जैसा:

सीएसएस

.slider-tip { 
    opacity:1; 
    bottom:120%; 
    margin-left: -1.36em; 
} 

Demo, here संपादित करें।

Answer 2

गिटूब/बूटस्ट्रैप पर एक समस्या के रूप में अच्छी तरह से ज्ञात धागा है: Twipsy tooltip with an unreachable link inside।

वहाँ आप देख सकते हैं कि रचनाकारों में से एक का कहना है:

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

और बाद में दो महीने:

ओह, 2.0 में वास्तव में आप क्या कर सकते नियुक्ति: "शीर्ष के अंदर" और यह तत्व के अंदर नशे hovered किया जा रहा से जोड़ दिया जाएगा। आपको कुछ सीएसएस के साथ काम करना होगा ताकि यह सुनिश्चित किया जा सके कि यह शैलियों का वारिस नहीं है, इत्यादि। यह सुनिश्चित नहीं है कि यह वास्तव में इसे अंतिम 2.0 रिलीज़ में लाएगा।