Initializing tooltip with JQueryUI

Question

HTML:

<input type='text' id='uname' />

JS:

$( "#uname" ).tooltip({ content: "gggg" });

Result: nothing. No tooltip, no errors; What is wrong here?

Demo: http://jsfiddle.net/w97FA/

These are the resources/plugins I used:

• http://jqueryui.com/tooltip/
• http://api.jqueryui.com/tooltip/#option-content

Answer 1

Tooltip is placed as a title:

<input type='text' id='uname' title="gggg" />

http://jsfiddle.net/samliew/w97FA/2/

Otherwise, you have to initialize the element with empty title, in order to set it dynamically:

<input type='text' id='uname' title='' />

http://jsfiddle.net/samliew/w97FA/8/

Answer 2

As the API documentation for tooltip states, if you use the "content"-option, you also need to use the items-option - so the following code works:

$('#uname').tooltip({ content: "Awesome title!", "items":"input" })

However, if you don't need specific logic for the displayed content, or some sophisticated selection, the usage of the title-attribute might be simpler.