Jquery dla etykiety narzędzia na kształtach obszaru mapy obrazu

Question

Mam to działa, aby utworzyć niestandardową podpowiedź na zawijasie dla mapy obrazu, korzystając z przykładów jquery, które znalazłem.

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

Kiedy najechaniu na obszarach obrazu map jednak pojawia się podpowiedź w lewym górnym rogu ekranu, a nie w pobliżu, gdzie znajduje się kursor. Pojawia się w tym samym miejscu dla każdego kształtu.

W przypadku innych elementów, takich jak demonstracja "etykiety", którą umieściłem poniżej obrazu, etykieta pojawia się bezpośrednio na etykiecie, gdzie powinna być.

Próbowałem dodać informacje o pozycji w oparciu o what I see here, ale wszystko, co dodaję, nie ma żadnego skutku lub unieważnia kod i nic nie dostaję. Jeśli dodać te informacje Pozycja widzę żadnej zmiany:

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

Podpowiedź dla wizerunku obszarów map nadal pojawia się tylko w lewym górnym rogu całej strony. A kiedy spróbowałem użyć innych parametrów pozycji, znokautowałem całość, więc nie było żadnych podpowiedzi.

Wszelkie pomysły?

UPDATE:

Nawet bez żadnych parametrów pozycyjnych, to wszystkie funkcje prawidłowo dla każdego innego elementu na stronie, form wejściowych, formy wyszukiwania, przycisk „Edycja”, i tak dalej. Wyświetlany jest prawidłowy styl etykiety narzędzia jquery i sąsiaduje z tymi elementami, bez względu na to, gdzie znajdują się na stronie.

To tylko na prostokątach obszaru mapy obrazu, które pojawiają się gdzie indziej. Dzięki temu rozpoznaje on kształty obszaru wystarczające do wyświetlenia etykiety narzędzia, ale nie umieszczając przy nim podpowiedzi.

UPDATE II

zorientowali się, że tylko widget jsquery wydawało się działać poprawnie na bloku elementów (i obszar nie jest elementem bloku) i wtedy natknął się na stanowisku, że wydawało się to potwierdzić, see response #5 here.. Ja już próbowałem dodanie stylu CSS, który definiuje pojęcia „teren” jako element bloku, a po zabawy trochę więcej z tego i zmianie pozycjonowania trochę wymyśliłem coś, co działa:

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

Stawia podpowiedzi w środku obrazu, który jest w porządku, nie potrzebuję ich dokładnie tam, gdzie kliknie osoba, tylko widoczna i niezbyt daleko. Nie mam pojęcia, dlaczego musi być minus 675, ale działa.

Answer 1

Chyba trzeba dodać position jako pierwszej opcji i drugiego problemu może, że jesteś wykonującego js przed html, przejść jquery skrypt do końca jsfiddle example here

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