JQuery UI tooltip - not displayed at the top of the element

Question

Please check my code on JS FIDDLE

I want my tooltip to appear on top of the element. what am I doing wrong?

I also did not find useful information about the position property in the documentation on the jquery user interface for tooltips, which does mine as well ... I copied the code from their demo

Answer 1

You must set the “my” position to “bottom” (bottom distance) Check JS FIDDLE

Answer 2

If I understand you correctly, do you want the tooltip text to completely cover the image intended for the tooltip?

Unfortunately, this is not possible using the tooltip. The reason is that the tooltip is only valid if the mouse is "above" the element in which the tooltip is included. The moment your tooltip covers this item, your mouse then over the tooltip instead of the selected item that fires a close event for the tooltip.

If the end result is more important than the method, you can set both open and close events for the click tooltip instead of their default values, and then place them accordingly.

Edit (to explain at and my :

my and at are like a dynamic x, y coordinate system to help you align your elements, except that each of them is x, y on its own. They both allow you to set control points within two objects that are related to each other, in this case a tooltip ( my ) and the object that the tooltip is created for ( at ).

my in your case, a tooltip appears, and at is the image that, when the mousein event is triggered, causes the tooltip to be instantiated. Each of these parameters takes a flat line or relative line position to determine the relationship of two objects (at the DOM position) to each other. So, if you want the top center of the tooltip to match the absolute center of the image, no matter where they appear in the DOM, you should set the following:

 position: { my: "center top", at: "center center" } 

You can get extra control by offsetting // my and at by combining the pixel value or the% value.

 position: { my: "center+10 top+50", at: "center+5 center+25" } 

Answer 3

I just want to give a simple answer to a future seeker who could not understand it around this term .. Definition ... my my selector .. as "my" image.

 $('img').tooltip(); 

Meanwhile, a "at" tooltip appears at this time

For instance:

 $('img').tooltip({ position: { my: "right center", at: "left center" } }); 

Here we selected the “my” image on the right, vertically centered .. and the tooltip will be displayed “left” relative to the image and vertically centered.