Show tooltip when input element get focus
Hello Friends,
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>
Hope this is helpful.