Jquery cho chú giải công cụ trên các vùng bản đồ hình ảnh

Question

Tôi đã làm việc này để tạo chú giải tùy chỉnh khi di chuột cho bản đồ hình ảnh, sử dụng một số ví dụ điển hình mà tôi đã tìm thấy.

<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"> 

Khi tôi di chuột qua các khu vực bản đồ hình ảnh, nó sẽ xuất hiện chú giải công cụ ở trên cùng bên trái của màn hình, không gần nơi con trỏ chuột. Nó xuất hiện ở cùng một vị trí cho mỗi hình dạng.

Đối với các yếu tố khác, như bản trình diễn "nhãn" tôi đã bao gồm ở đây bên dưới hình ảnh, chú giải công cụ xuất hiện ngay tại nhãn, nơi cần hiển thị.

Tôi đã thử thêm thông tin vị trí dựa trên what I see here, nhưng mọi thứ tôi thêm hoặc không có hiệu lực hoặc nó sẽ làm mất hiệu lực mã và tôi không nhận được gì. Nếu tôi thêm thông tin vị trí này, tôi không thấy thay đổi:

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

Chú giải công cụ cho khu vực bản đồ hình ảnh vẫn chỉ xuất hiện ở góc trên cùng bên trái của toàn bộ trang. Và khi tôi thử sử dụng các thông số vị trí khác, nó đã loại bỏ toàn bộ điều đó nên không có chú giải công cụ nào.

Bất kỳ ý tưởng nào?

UPDATE:

Mặc dù không có bất kỳ thông số vị trí, tất cả các chức năng một cách chính xác cho bất kỳ yếu tố khác trên trang, các hình thức đầu vào, các hình thức tìm kiếm, nút "Edit", và vân vân. Phong cách chính xác của chú giải công cụ jquery xuất hiện, và nó tiếp giáp với các phần tử đó, bất kể chúng ở đâu trên trang.

Chỉ trên hình chữ nhật của khu vực bản đồ hình ảnh mà nó xuất hiện ở nơi khác. Vì vậy, nó nhận ra khu vực có hình dạng đủ để kích hoạt chú giải công cụ, nhưng không đặt chú giải công cụ bên cạnh nó.

CẬP NHẬT II

tôi đã tìm ra rằng widget jsquery dường như chỉ để hoạt động một cách chính xác trên khối yếu tố (và khu vực không phải là một yếu tố khối) và sau đó tình cờ một bài mà dường như xác nhận điều này, see response #5 here.. Tôi đã cố gắng thêm phong cách CSS định nghĩa "khu vực" như một yếu tố ngăn chặn, và sau khi chơi xung quanh một số chi tiết với điều đó và thay đổi vị trí khá một chút tôi đã đưa ra một cái gì đó mà làm việc:

<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> 

này đặt tooltips ở trung tâm của hình ảnh, điều đó là tốt, tôi không cần chúng chính xác là nơi người đó nhấp chuột, chỉ nhìn thấy được và không quá xa. Tôi không có ý tưởng tại sao nó cần phải được trừ 675, nhưng nó hoạt động.

Answer 1

Tôi nghĩ rằng bạn cần phải thêm position như tùy chọn đầu tiên và Vấn đề thứ hai có lẽ đó bạn đang thực hiện js trước html, di chuyển jquery kịch bản đến cuối jsfiddle example here

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