Simple jQuery UI Tooltip with no title attribute

Josh Young picture Josh Young · Oct 10, 2013 · Viewed 17.1k times · Source

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

Brandon picture Brandon · Oct 10, 2013

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