Why isn't this jQuery UI tooltip working as expected?

Question

I've been working on this for literally days now. I have an application that's using jQuery UI for datepickers. Now, I also need some enhanced tooltips, so I was happy to see a tooltip widget added to jQueryUI.

I still need to support older versions of IE, so I can't use jQuery 2.0. I've upgraded to jQuery 1.9.1 and jQuery UI 1.10.3.

Anyway, the tooltip isn't behaving at all like I expect. I am creating the tooltips with this code:

    $(document).ready(function() {
        $('.tooltipStyle').tooltip({
            position: { my: "top left", at: "bottom center" },
            content: function() { 
                return "This tooltip is a function return value with <b>HTML content</b>"; 
            }
        });
    });

Full demo at jsFiddle: http://jsfiddle.net/2agHC/4/. (Note that I've used the External Resources on the left to load the matching versions of jQuery and jQuery UI.)

First, I can't get the position property to work. I expect that the tooltip will appear starting just below the control to which it's attached, with its top left corner centered on the control. (I've made the gray so it's visible.) However, the tooltip appears up against the left edge of the window.

Secondly, I have to click on the div in order for the tooltip to display, while I'm expecting that it will appear with a hover.

I feel like I'm missing something bery fundamental about how the tooltip is supposed to be used, but like I said, I've been at this for days now. Can anyone explain what I'm missing?

Answer 1

Do you want it like this? jsfiddle

$(document).ready(function() {
    $('.tooltipStyle').tooltip({
        position: { my: "left top", at: "bottom" },
        content: function() { 
            return "This tooltip is a function return value with <b>HTML content</b>"; 
        }
    });
});

If it's not your desired behaviour please respond. Also reading the documentation on the jQuery UI Position utility might be helpful.

I guess the click you were speaking of was just there because the tooltip was hovering directly over the element. Although in your example I didn't need to click...the tooltip pops up, immediately hides and then shows again.

To make it complete (like eclps' extract from docu)

my (default: "center")

Type: String

Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. [...]

Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned.

Answer 2

From the jQuery UI Position docs for 'my':

Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. [...] Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center".

You need to swap your position values. As shown in SirDerpington's answer.

position: { my: "left top" },