Jquery per la descrizione dei comandi sulle forme dell'area della mappa immagine

Question

Ho lavorato per creare un suggerimento personalizzato su passaggio del mouse per una mappa immagine, utilizzando alcuni esempi di jquery che ho trovato.

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

Quando mi passa il mouse sopra le aree della mappa immagine però si solleva il tooltip in alto a sinistra dello schermo, non è vicino a dove il mouse è puntato. Appare nello stesso posto per ogni forma.

Per altri elementi, come la demo "etichetta" che ho incluso qui sotto l'immagine, il tooltip appare proprio sull'etichetta, dove dovrebbe essere.

Ho provato ad aggiungere informazioni sulla posizione basate su what I see here, ma tutto ciò che aggiungo non ha alcun effetto o invalida il codice e non ottengo nulla. Se posso aggiungere queste informazioni di posizione non vedo nessun cambiamento:

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

la descrizione per le aree mappa immagine appare ancora solo nell'angolo in alto a sinistra della pagina intera. E quando ho provato ad usare altri parametri di posizione, ha eliminato tutto, quindi non c'erano tooltip.

Qualche idea?

UPDATE:

Anche senza alcun parametro di posizione, ma tutte le funzioni correttamente per qualsiasi altro elemento sul pulsante "Modifica" pagina, moduli di input, moduli di ricerca, e così via. Appare lo stile corretto della descrizione del jquery, ed è adiacente a quegli elementi, indipendentemente da dove si trovino nella pagina.

È solo sui rettangoli dell'area della mappa immagine che appare altrove. Quindi riconosce le forme dell'area sufficienti per attivare il suggerimento, ma non posiziona il suggerimento adiacente ad esso.

UPDATE II

ho capito che il widget jsquery solo sembrava funzionare correttamente su blocco elementi (e la zona non è un elemento di blocco) e poi ci siamo imbattuti in un post che sembrava confermare questo, see response #5 here.. Avevo già provato ad aggiungere stile CSS che ha definito "area" come un elemento di blocco, e dopo aver giocato in giro ancora un po 'con quella e cambiare il posizionamento di un bel po' mi si avvicinò con qualcosa che funziona:

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

Questo mette i tooltip al centro dell'immagine, che va bene, non ho bisogno che siano esattamente dove la persona fa clic, appena visibile e non troppo lontano. Non ho idea del motivo per cui deve essere meno 675, ma funziona.

Answer 1

penso che è necessario aggiungere position come opzione di primo e secondo problema forse che si sta eseguendo js prima html, spostare jquery script per la fine jsfiddle example here

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