jQuery यूआई टूलटिप्स - माउस पर लंबवत रूप से केंद्रित स्थिति को सही तरीके से कैसे स्थानांतरित करें?

Question

अद्यतन: अभी भी एक व्यवहार्य समाधान की तलाश है, लेकिन नीचे मेरा जवाब देखें, यह आपकी मदद कर सकता है या आपको एक विचार दे सकता है। यह एक विशिष्ट संकल्प के लिए काम करता है।

मैं jQuery UI tooltips plugin का उपयोग कर रहा हूं लेकिन मैं मीटर टूलटिप को स्थिति में रखने में परेशानी कर रहा हूं।

मैं इसे लंबवत माउस पर केंद्रित करना चाहता हूं, लेकिन प्रश्न में तत्व के बाईं ओर। मेरा मानना ​​है कि मैं सही ढंग से यह कह रहा हूं, लेकिन मैं आपको जो कहता हूं उसका एक चित्र दिखाऊंगा।

तुम मेरे उदाहरण में, यह तत्व ही है, माउस नहीं करने के लिए खड़ी केंद्रित है देख सकते हैं
http://prntscr.com/v2yqi

(यह है कि क्या यह होना चाहिए कर रही है)।

यदि यह माउस (केवल लंबवत ट्रैकिंग) के साथ स्थानांतरित हो सकता है जो सही होगा। सुनिश्चित नहीं है कि यह प्लगइन के साथ यह संभव है। मैं वास्तव में उनके positioning API को समझ नहीं पा रहा हूं।

और यहां एक JSFiddle है।

$(function() { 
    $(document).tooltip({ 
     items: ".entry", 
     position: { my: "center", at: "left" }, 
     content: function() { 
     var element = $(this); 
     if ((element.is(".entry"))) { 
      return "<div class='hi'>This is a very nice entry! It's so pretty and I feel  like I can touch it. This is just random filler text to give you the idea..</div>"; 
     } 
     } 
    }); 
}); 

मैं वास्तव में किसी भी अंतर्दृष्टि की सराहना करता हूं जो आप मुझे इस पर दे सकते हैं। अग्रिम में धन्यवाद।

Answer 1

काम कर इसे प्राप्त करने समाप्त एक कस्टम वर्ग को जोड़कर है, ट्रैकिंग और स्थिति: तय:

जावास्क्रिप्ट:

$(function() { 
     $(document).tooltip({ 
      items: ".entry", 
      position: { 
       my: "right bottom+50" 
      }, 
      tooltipClass: "entry-tooltip-positioner", 
      track: true, 
      content: function() { 
       var element = $(this); 
       if ((element.is(".entry"))) { 
        return "<div class='hi'>This is a very nice entry! It's so pretty and I feel like I can touch it. This is just random filler text.</div>"; 
       } 
      } 
     }); 
    }); 

सीएसएस:

.entry { 
    position: relative; 
    right: -200px; 
    width: 500px; 
} 
.entry-tooltip-positioner { 
    position: fixed !important; 
    left: -130px !important; 
} 

और अद्यतन JSFiddle

उम्मीद है कि इस किसी और बाहर कुछ समय में मदद करता है।

Answer 2

आप track: true उपयोग कर सकते हैं, लेकिन मुझे लगता jQuery टूलटिप बहुत उपयोगकर्ता के अनुकूल और लचीला नहीं है = ( आप qTip2 की कोशिश की?

http://jsfiddle.net/5XWaB/2/