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:

$(function() {
            $(‘#clueTipBox’).cluetip({splitTitle: ‘|’, showTitle:true, cluetipClass: ‘jtip’, dropShadow:false, positionBy:’fixed’});
            //show tooltip box when textbox get focus
            //hide tooltip box when textbox lost focus

HTML code looks like:

<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.