jQuery यूआई टूलटिप पोजिशनिंग समस्या

Question

मेरे पास jQuery UI के टूलटिप्स के साथ एक पोजिशनिंग समस्या है। मैं jQuery UI का उपयोग नहीं करना चाहूंगा, लेकिन जिस परियोजना पर मैं काम कर रहा हूं वह पहले से ही इसका उपयोग करता है और अनुरोध किया गया है कि मैं अपने पसंदीदा विकल्प, qTip2 को एकीकृत करने के बजाय इसे उपयोग करने और उसका उपयोग करने का अनुरोध करता हूं।

जब टूलटिप प्रकट होता है, तो यह लंबवत स्क्रॉलबार का कारण बनता है। मैं लक्ष्य के ऊपर केंद्रीय रूप से टूलटिप को पोजिशन कर रहा हूं और जैसा कि मैं चाहता हूं, इस मुद्दे को छोड़कर।

$(function() { 
$(document).tooltip({ 
show: false, 
    hide: false, 
    position: { 
    my: "center bottom-20", 
    at: "center top", 
    using: function(position, feedback) { 
     $(this).css(position); 
     $("<div>") 
     .addClass("arrow") 
     .addClass(feedback.vertical) 
     .addClass(feedback.horizontal) 
     .appendTo(this); 
    } 
    } 
}); 
}); 

मैं देख सकता हूँ कि टूलटिप शीर्ष पर तैनात किया जा रहा है: -600px जो मुझे लगता है क्या स्क्रॉलबार प्रकट करने के लिए खड़ी कर रहा है है।

मैंने टूलटिप की स्थिति बदलने/हटाने की कोशिश की है, लेकिन इसका कोई प्रभाव नहीं पड़ा। मैंने समस्या को इंगित करने के लिए सीएसएस के हिस्सों को हटाने की कोशिश की है और यह पैडिंग (किसी भी) या ऊंचाई (न्यूनतम, अधिकतम या निश्चित) से संबंधित प्रतीत होता है।

हालांकि पैडिंग और ऊंचाई को हटाने से समस्या ठीक हो जाती है, यह स्पष्ट रूप से टूलटिप को थोड़ा सा छोड़ देता है ... स्कीनी। मैं यह जानना चाहता हूं कि समस्या क्या है और इसके चारों ओर एक तरीका है, इसलिए मैं टूलटिप को स्टाइल कर सकता हूं।

मेरा वर्तमान सीएसएस (ऊंचाई और पैडिंग जो मैं देख सकता हूं, समस्या का कारण बनता है) निम्नानुसार है (तीरों के लिए शैली भी सेट की गई हैं, जिन्हें मैंने छोड़ा है क्योंकि मैं देख सकता हूं कि वे कोई समस्या नहीं पैदा कर रहे हैं):

.ui-tooltip { 
    z-index:10; 
    width:150px; 
    padding:10px; 
    min-height:20px; 
    max-width:100%; 
    font-size:0.875em; 
    text-align:center; 
    border-radius: 20px; 
    color:#707070; 
    background:#fffdc2 url(../img/fade.png) repeat-x; 
    font-family: 'Droid Sans', sans-serif; 
    text-shadow: 1px 1px #ffffff; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border:1px solid #e1e0aa;} 

मैं जानता हूँ कि jQuery यूआई an open issue about connectors है, तो मैं किसी भी स्थिति सेटिंग्स के बिना यह परीक्षण किया है और यह इस के लिए कोई फर्क पड़ा।

मैंने देखा है कि this issue कुछ बार उल्लेख किया गया है, लेकिन यह प्रासंगिक नहीं था क्योंकि मेरे पास qTip नहीं है, या कुछ भी शामिल नहीं है।

मैंने JS fiddle here स्थापित किया है।

मैं किसी भी मदद या सलाह की सराहना करता हूं।

धन्यवाद!

Answer 1

अगर मैं सही ढंग से समझ तुम क्या वर्णन समस्या के रूप में, खड़ी स्क्रॉलबार जोड़ा जाता है क्योंकि एक अतिरिक्त div ("# ui-टूलटिप-XX") position: relative साथ दस्तावेज़ के शरीर है, जो अतिरिक्त स्थान बढ़ती तक ले जाता है में जोड़ा जाता है शरीर की scrollHeight संपत्ति (और स्क्रॉलबार प्रकट होने का कारण बनती है)। यदि यह आपके शेष HTML (जो मेरे पास परीक्षण करने के लिए मेरे पास नहीं है) के साथ "संगत" है, तो आप टूलटिप की position विशेषता absolute पर सेट करके इस समस्या को बाधित कर सकते हैं (जो इसके कंटेनर की समग्र ऊंचाई में योगदान नहीं देता है ।

// Add this in your CSS 
.ui-tooltip, .arrow:after { 
    position: absolute; 
    .... 

(अपने पृष्ठ पर एचटीएमएल के बाकी के आधार पर, अतिरिक्त संशोधनों के लिए आवश्यक हो सकता है।)

देखें, भी, इस short demo।

Answer 2

मेरे ऐप के लिए

(जो है साधन नेस्टेड jQuery टैब के भीतर एक jQuery डेटाटेबल में सेल्स में टिप्स), बस 'स्थिति: पूर्ण' सेटिंग पर्याप्त नहीं थी - मुझे टूलटिप्स को प्रारंभिक ऑनस्क्रीन टॉप और बाएं पोजीशन भी देना था क्योंकि इसे केवल सृजन के बाद ही स्थानांतरित किया गया था:

.ui-tooltip 
{ 
    position: absolute; 
    top: 100px; left: 100px; 
}