Show tooltip When Input Element Get Focus

Recently I am working on one of the project, and inside it we want functionality to show a hint tooltip box (show information related to that field) when that input element get focus.

I use clueTip (a jQuery tooltip plugin) to show hint tooltip box.

I use jQuery focusin() and focusout() event of the element to show/hide hint tooltip box.

JavaScript code looks like:

[code:js]
$(function() {
            $(‘#clueTipBox’).cluetip({splitTitle: ‘|’, showTitle:true, cluetipClass: ‘jtip’, dropShadow:false, positionBy:’fixed’});
            
            //show tooltip box when textbox get focus
            $(‘#textBox’).focusin(function(){
                $(‘#clueTipBox’).mouseenter();
            });
            
            //hide tooltip box when textbox lost focus
            $(‘#textBox’).focusout(function(){
                $(‘#clueTipBox’).mouseleave();
            });
        });[/code]

HTML code looks like:

[code:html]
<input type="text" name="textBox" id="textBox" title="Click here to show tooltip" value="" />
<a href="#" id="clueTipBox" class="clueTipBox" title="Title Text|This box will open when text box get focus OR mouse hover on ‘Hint’ text.">Hint</a>[/code]

Show Demo

Hope this is helpful.