jBox.js tooltip show on textbox focused and hide on unfucused

Question

When I clicked in text box jbox.js tooltip is showing, I want when text box is focused tooltip show and when unfocused tooltip hide.

Script:

<script type="text/javascript">
$(document).ready(function() {
    $('.tooltip').jBox('Tooltip', {
        trigger: 'click',
        position: {
            x: 'right',
            y: 'center'
        },
        outside: 'x'
    });
});
</script>

HTML tag:

<input type="text" class="tooltip" autofocus placeholder="First" id="fname" title="Your First Name in Latin" />
<input type="text" class="tooltip" placeholder="Last" id="lname" title="Your Last Name in Latin" />
<span class="lbl">Choose your username</span>
<input type="text" class="tooltip" id="uname" title="You Can Use letters, numbers, dots" />
<span class="lbl lbl_no">Username can't leave this empty.</span>

Answer 1

You will be use of focus and blur function in JQuery. Your need code is :

   <script type='text/javascript'>
    $(document).ready(function() {
        var x = $('.tooltip').jBox('Tooltip', {
            trigger: 'focus',
            animation:{open: 'tada', close: 'flip'},
            position:{
             x:'right',
             y:'center'   
            }, outside:'x'
        });
        $('.tooltip').blur(function() {
            x.close();
        });
    });
</script>