Mahavir Dhruv     Feb,08 2017

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            $('#textBox').focusin(function(){                $('#clueTipBox').mouseenter();            });                        //hide tooltip box when textbox lost focus            $('#textBox').focusout(function(){                $('#clueTipBox').mouseleave();            });        });

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>

Show Demo

Hope this is helpful.