I have work on creating a custom tooltip when hovering an image on a map using some jquery examples I found.
<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">
When I hover over an image map area, it pops up with a tooltip in the upper left corner of the screen, and not next to the mouse pointer. It appears in the same place for each form.
For other elements, such as the demonstration of a shortcut included here below the image, a tooltip appears directly on the shortcut where it should be.
I tried to add position information based on what I see here , but everything I add has no effect or the code is invalid and I get nothing. If I add this location information, I do not see any changes:
$( document ).tooltip({ my: "right center", at: "right center" });
The tooltip for areas of the image map is still displayed only in the upper left corner of the entire page. And when I tried to use other position parameters, he knocked out everything so that there were no tooltips.
Any ideas?
UPDATE:
Even without any position parameters, everything works correctly for any other element on the page, input forms, search forms, "Change" buttons, etc. The correct jquery tooltip style will appear and it is adjacent to these elements, regardless of where they are on the page.
It is only on the rectangles of the image map area that appear elsewhere. That way, it recognizes areas that are enough to trigger a tooltip, but without placing a tooltip next to it.
UPDATE II
I realized that the jsquery widget seems to work correctly on the block (and the area is not a block element), and then came across a message that seemed to confirm this, see answer No. 5 here. . I already tried adding a CSS style that defined "area" as a block element, and after playing around with it a bit and changing position, I came up with something that works:
<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>
This puts the tooltips in the center of the image, and that's fine, I don't need them to be exactly where the person clicks, just visible and not too far away. I have no idea why this should be minus 675, but it works.