छवि मानचित्र क्षेत्र आकार पर टूलटिप के लिए Jquery

Question

मुझे यह मिला है कि मुझे कुछ jquery उदाहरणों का उपयोग करके एक छवि मानचित्र के लिए होवर पर एक कस्टम टूलटिप बनाने के लिए काम मिल गया है।

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 

<script> 
    $(function() { 
     $(document).tooltip(); 
    }); 
</script> 


<img src="http://blahblahblah" alt="HTML Map" border="0" usemap="#image" class="map"/> 

<map name="image"> 
    <area shape="rect" coords="19, 138, 177, 161" title="Popup Message" /> 
    <area shape="rect" coords="19, 178, 314, 192" title="Another Popup Message" /> 
    <area shape="rect" coords="23, 203, 304, 217" title="A Third Popup Message" /> 
</map> 

<label for="userid">Your userid:</label><input id="userid" title="This Popup Message Appears in the Right Place"> 

जब मैं छवि मानचित्र क्षेत्रों पर होवर लेकिन यह ऊपर टूलटिप स्क्रीन के ऊपर बाईं ओर, पॉप माउस द्वारा संकेत है के पास नहीं। यह प्रत्येक आकार के लिए एक ही स्थान पर दिखाई देता है।

अन्य तत्वों के लिए, "लेबल" डेमो की तरह, मैंने छवि के नीचे यहां शामिल किया है, टूलटिप लेबल पर सही दिखाई देता है, जहां यह होना चाहिए।

मैंने what I see here पर आधारित स्थिति जानकारी जोड़ने का प्रयास किया है, लेकिन जो कुछ भी मैं जोड़ता हूं उसका कोई प्रभाव नहीं पड़ता है या यह कोड को अमान्य करता है और मुझे कुछ भी नहीं मिलता है।

$(document).tooltip({ 
    my: "right center", at: "right center" 
}); 

छवि मानचित्र क्षेत्रों के लिए टूलटिप अभी भी केवल पूरे पृष्ठ के ऊपरी बाएं कोने में दिखाई देता है: यदि मैं इस स्थिति में कोई जानकारी जोड़ने मैं कोई परिवर्तन नहीं देखते हैं। और जब मैंने अन्य स्थिति मानकों का उपयोग करने की कोशिश की तो उसने पूरी चीज को खारिज कर दिया ताकि कोई टूलटिप्स न हो।

कोई भी विचार?

अद्यतन:

यहां तक ​​कि किसी भी स्थिति पैरामीटर के बिना, यह सभी कार्यों को सही ढंग से पेज, इनपुट रूपों, खोज रूपों, "संपादन" बटन, और इतने पर पर किसी भी अन्य तत्व के लिए। Jquery टूलटिप की सही शैली प्रकट होती है, और यह उन तत्वों के समीप है, इससे कोई फर्क नहीं पड़ता कि वे पृष्ठ पर कहां हैं।

यह छवि मानचित्र क्षेत्र आयताकारों पर है जो यह कहीं और दिखाई देता है। तो यह टूलटिप को ट्रिगर करने के लिए पर्याप्त क्षेत्र आकार को पहचान रहा है, लेकिन इसके आस-पास टूलटिप नहीं रख रहा है।

अद्यतन द्वितीय

मैं पता लगा कि jsquery विजेट केवल ब्लॉक तत्वों पर सही ढंग से संचालित करने के लिए लग रहा था (और क्षेत्र एक ब्लॉक तत्व नहीं है) और फिर एक पोस्ट है कि इस बात की पुष्टि करने लग रहा था भर में ठोकर खाई, see response #5 here.।

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 

<style> 
    area { 
    display: inline-block; 
    } 
</style> 

<script> 
    $(function() { 
    $(document).tooltip({position: {at: "center-675 center-450"}}); 
    }); 
</script> 


<img src="http://blahblahblah" alt="HTML Map" border="0" usemap="#image" class="map"/> 

<map name="image"> 
    <area shape="rect" coords="19, 138, 177, 161" title="Popup Message" /> 
    <area shape="rect" coords="19, 178, 314, 192" title="Another Popup Message" /> 
    <area shape="rect" coords="23, 203, 304, 217" title="A Third Popup Message" /> 
</map> 

यह टूलटिप्स कहते हैं: मैं पहले से ही सीएसएस शैली है कि "क्षेत्र" में परिभाषित किया गया एक ब्लॉक तत्व के रूप में जोड़ने की कोशिश की थी, और उस के साथ कुछ और चारों ओर खेल रहे हैं और स्थिति बहुत कुछ बदल के बाद मैं कुछ है कि काम करता है के साथ आया था छवि के केंद्र में, जो ठीक है, मुझे उन लोगों की बिल्कुल आवश्यकता नहीं है जहां व्यक्ति क्लिक करता है, बस दिखाई देता है और बहुत दूर नहीं। मुझे नहीं पता कि इसे 675 से कम करने की आवश्यकता क्यों है, लेकिन यह काम करता है।

Answer 1

मैं तुम्हें विकल्प पहली और दूसरी समस्या शायद यह है कि आप एचटीएमएल से पहले js को क्रियान्वित कर रहे हैं के रूप में position जोड़ने के लिए, अंत jsfiddle example here

$(function() { 
    $(document).tooltip({ position: { my: "right center", at: "right center" } }); 
});