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");

Answer 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");

Answer 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");