Simple jQuery UI Tooltip without title attribute

Question

I am trying to work with the JQuery UI Tooltip, and I think I can miss something.

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

I believe that I could call it almost everywhere in my javascript:

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

This does not work. Am I doing something wrong?

EDIT: I should mention that #ContactName is the input [type = text] and it is in the jQuery interface dialog box.

EDIT 2: Well, it worked. I really don't understand why.

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

It works on hovering. Anyway, can I, in the same code, open it 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 parameter, you may also need to specify the items parameter.

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 do for multiple selectors at the same time), you can also set the name on the fly:

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