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

See also: forum.jquery.com/topic/jquery-ui-tooltips-require-a-title-tag — KyleMit
– KyleMit ♦, Commented Oct 10, 2014 at 4:37

Brandon · Accepted Answer · 2013-10-11 13:58:18Z

20

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

edited Oct 11, 2013 at 13:58

answered Oct 10, 2013 at 20:36

Brandon

70.3k32 gold badges201 silver badges227 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Josh Young Over a year ago

Why does it have to be bound to the container?

Brandon Over a year ago

@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 Over a year ago

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

Brandon Over a year ago

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

Tiago Romero Garcia · Accepted Answer · 2015-03-30 18:46:13Z

1

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

answered Mar 30, 2015 at 18:46

Tiago Romero Garcia

1,0789 silver badges12 bronze badges

1 Comment

Fredrick Gauss Over a year ago

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

Collectives™ on Stack Overflow

Simple jQuery UI Tooltip with no title attribute

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related