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" 
}); 

的圖像映射區域的提示仍然只在整個頁面的左上角出現。當我嘗試使用其他位置參數時，它將所有東西都敲掉，所以沒有任何提示。

任何想法？

UPDATE：

即使沒有任何位置參數，它正確的頁面，輸入表格，搜索表單，「編輯」按鈕，等上任何其他元素的所有功能。 jquery tooltip的正確樣式出現，並且它與這些元素相鄰，無論它們在頁面上的什麼位置。

它只是在其他地方出現的圖像映射區域矩形上。所以它會識別足夠的區域形狀以觸發工具提示，但不會將工具提示放置在相鄰位置。

UPDATE II

我想出的是，jsquery插件似乎只在塊元件正常運行（和麪積不是塊元件），然後跨似乎證實這後偶然發現， see response #5 here.。我已經嘗試添加該定義的「面積」作爲一個塊級元素的CSS樣式，和周圍的一些多用，玩，改變定位頗有幾分後，我想出了一些作品：

<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

我認爲你需要添加position爲第一選擇，也許你是HTML之前執行js秒問題，移動jquery腳本結束jsfiddle example here

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