Simple jQuery UI Tooltip with no title attribute

Question

I'm trying to work with jQuery UI Tooltip and I think I may be missing something.

I want the simplest possible tooltip to show up without specifying the title property.

I believe I should be able to call this pretty much anywhere in my javascript:

$('#ContactName').tooltip({ content: 'Hey, look!' }).tooltip('open');

This is not working. Am I doing something wrong?

EDIT: I should mention that #ContactName is an input[type=text], and it is in a jQuery UI dialog.

EDIT 2: Okay this worked. I don't really understand why, though.

$($('#ContactName').parent()).tooltip({
    items: '#ContactName',
    content: 'Hey, look!'
});

It works on hover. Is there anyway that I can, in the same code, make it open immediately?

EDIT 3: This is what I ended up with:

            $($('#ContactName')).tooltip({
                items: '#ContactName',
                content: $(this).text(),
                position: {
                    my: 'left+15',
                    at: 'right center'
                },
                tooltipClass: 'ui-state-error'
            }).tooltip("open");

Solution 1

When you set the content option you may also need to specify the items option.

See their API documentation and this jsFiddle example

<span id="ContactName">Test</span>

$("#ContactName").tooltip({
    items: "span",
    content: "Awesome title!"
}).tooltip("open");

Solution 2

This is a bit hacky but when items doesn't work for you (let's say you are doing for multiple selectors at once) you can also set title on the fly:

$($('#ContactName')).
        attr('title', '').
        tooltip({
            content: $(this).text(),
            position: {
                my: 'left+15',
                at: 'right center'
            },
            tooltipClass: 'ui-state-error'
        }).tooltip("open");

Comments

[Josh Young]

Why does it have to be bound to the container?

[赵君君]

@JoshYoung, see update. It doesn't need to be, but you do have to bind it to something and then tell it specifically what items to look at. I'm not sure how to reference this in the options element, but you can just use the element selector.

[Josh Young]

That is working. Is there any way I can make it open immediately?

[赵君君]

@JoshYoung, call open after initializing the tooltip. See update.

[Fredrick Gauss]

Right value for content should be : function() { return $(this).text(); }. items should be set also.