CODEWITHSUNDEEP
jqueryjquery-uipositiontooltip
Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

jquery UI tooltip - not showing on the top of element

Please check my code at this JS FIDDLE

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

I also didn't find any usable info about position property in the jquery UI documentation for tooltips what does my and at means... I copied the code from their demos

Upvotes: 4

Views: 13915

Answers (3)

symphony86
symphony86

Reputation: 23

Just want to give simple answer to future searcher who couldn't get his mind around this term.. The definition is.. my is my selector.. like 'my' image.. 

$('img').tooltip();

Meanwhile at is where the tooltip should appear 'at'

For example:

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

Here, we have chose the 'my' image to be at the right, vertically centered.. and the tooltip to be appear 'at' the left relative to image and vertically centered as well..

Upvotes: 2

Brian Vanderbusch
Brian Vanderbusch

Reputation: 3339

If I understand you correctly, you want the tooltip text to completely cover the image it's meant to tooltip?

Unfortunately that's not possible with tooltip. The reason being, tooltip is only valid while the mouse is "over" the element the tooltip is initiated on. The moment your tooltip covers that element, your mouse is then over the tooltip, instead of the selected element, which would trigger the close event for the tooltip.

If the end result is more important than the how, you could set both the open and close events for the tooltip to click instead of their defaults, then position accordingly.

Edit (to explain at and my:

my and at are sort of like a dynamic x,y coordinate system to help you align your elements, except each one is an x,y in and of itself. They both allow you to set reference points within 2 objects that have a relationship to each other, in this case being the tooltip (my), and the object the tooltip is instantiated on (at).

my in your case is the tooltip that pops up, and at is the image that when mousein event is triggered on, causes the tooltip to instantiate. Each one of these options, takes a flat string, or a relative string-position, to determine the 2 objects relationship (in position of the DOM) to each other. So, if you want the top center of the tooltip to align with the absolute center of the image, regardless of where they appear in the DOM, you would set the following:

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

You can gain further control by offsetting either/both my and at by combining a pixel value or % value. 

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

Upvotes: 5

Bruno Chagas
Bruno Chagas

Reputation: 91

You should set position 'my' to 'bottom-(distance of bottom) Check this JS FIDDLE

Upvotes: 9

Related Questions