Cannot restrict JQuery UI tooltip on form input field to be displayed on click/focus event only

Question

Basically I am trying to display JQuery UI tooltip on focus event only (on a form input field). It works fine the first time around... it opens the tooltip and on blur closes it. But the second click in the input field does nothing! Please help!

<script type="text/javascript">
$(document).ready(function () {
        $("input[name='fname']").tooltip({ 
            position: { my: "left top", at: "left-30 bottom+10" },
        hide: { effect: "fold", duration: 400 },
        disabled: true
          });

 $("input[name='fname']").tooltip({ content: "Please enter your first name."});
 $("input[name='fname']").focus(function (){
            $("input[name='fname']").tooltip("enable");      
            $("input[name='fname']").tooltip("open");return false; 
 });

 $("input[name='fname']").blur(function(){
           $("input[name='fname']").tooltip("close");
           $("input[name='fname']").tooltip("disable");return false;
 }); 

});

</script>

The form is much longer but I thought just one field should suffice to focus on the problem. There is not much discussion on the topic and the suggestions offered do not work.

Answer 1

Two problems I suspect:

1) in such lines as: $("input[name='fname']").tooltip("enable"); $("input[name='fname']").tooltip("open");return false; Change the input[name='fname'] to (this)

2) Try moving this line: $("input[name='fname']").tooltip({ content: "Please enter your first name."}); immediately after this line:

$("input[name='fname']").tooltip("disable");return false;