Showing and Hiding jQuery ui tooltip manually

Question

I'm trying to show tooltip of <input> on button click manually with jQuery ui tooltip.

For that if I set like this

<input type="text" id="has-tt" title=""></input>

for the first click alone its showing tooltip.But If I set title attribute with some content as below its working fine.

<input type="text" id="has-tt" title="Tooltip Text"></input>

Tried Sample is here. Is there any way to do this without setting value to title attribute??

Answer 1

You can use:

$("#has-tt").tooltip({
    items: 'input',
    content: "Tooltip Text!"
}).tooltip("open");

Demo

Answer 2

Working fiddle

HTML

<form>
    <input type="text" id="has-tt" title="Tooltip Text"></input>
</form>

Jquery

 $(function () {
    var tooltips = $("#has-tt").tooltip();      
    $("<button>")
         .text("Close")
         .button()
         .click(function () {
             tooltips.tooltip("close");
         })
   .insertAfter("form");
    $("<br/>").insertAfter("button");
    $("<button>")
         .text("Show help")
         .button()
         .click(function () {
             tooltips.tooltip("open");
         })
   .insertAfter("form");       
});