Question

I am trying to understand someone else’s codes…he has the following:

    var positionAt = horizontalPosition + ' ' + verticalPosition;
    var positionOffset = String(horizontalOffset + ' ' + verticalOffset);

   //i don't understand the codes below. I don't think Jquery position method support at and of attribues....

   $tooltipElement.position({at: positionAt, of: $element, my: 'left top', offset: positionOffset});

                $element.hover(function(){
                            $instance = $(this).css({'cursor': 'pointer'});
                            $('#tooltip-' + $instance.attr('id') ).fadeIn('fast');
                }, function(){
                            $instance = $(this).css({'cursor': 'auto'});
                            $('#tooltip-' + $instance.attr('id') ).fadeOut('fast');
                });

I am not sure what the position method with At, of and my attributes for. Can anyone help me about it? Thanks a lot.

Answer 1

He’s using the UI/Position plugin, in which the position function takes my, at and of parameters :

my :
Defines which position on the element being positioned to align
with the target element: “horizontal vertical” alignment. A single
value such as “right” will default to “right center”, “top” will
default to “center top” (following CSS convention). Acceptable values:
“top”, “center”, “bottom”, “left”, “right”. Example: “left top” or
“center center”

at :
Defines which position on the target element to align the
positioned element against: “horizontal vertical” alignment. A single
value such as “right” will default to “right center”, “top” will
default to “center top” (following CSS convention). Acceptable values:
“top”, “center”, “bottom”, “left”, “right”. Example: “left top” or
“center center”

of :
Element to position against. If you provide a selector, the first
matching element will be used. If you provide a jQuery object, the
first element will be used. If you provide an event object, the pageX
and pageY properties will be used. Example: “#top-menu”