how to show the tooltip when move over the textbox and show the hiddenvalue using jquery balloon

how to show the tooltip when move over the textbox and show the hiddenvalue using jquery balloon

Hi Friends,

I have the below requirement. I have table with three columns with multiple rows.
The last column has 2 textboxs
one for use input and another one for hiddenvalue
The requirement is 
1) when the user mouse over the first text box I need a  show the value of the second text box as tooltip using jquery balloon plugin. 
2)when the mouse moves out of textbox it should not show plugin 
3)The tooltip should  not  be show when the user types something in the textbox

Please help

<!DOCTYPE html >
< html >

< head >
< style >
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 2px;
text-align: left;
}
< / style >
</ head >

< body >

< h2 >Table Caption </ h2 >
< p >how to show the tooltop when move over the textbox and show the hiddenvalue using jquery balloon. </ p >

< table style= "width:50%" >
< caption >Monthly savings </ caption >
< tr >
< th >Month </ th >
< th >Savings </ th >
< th >SupportingValue </ th >
</ tr >
< tr >
< td >January </ td >
< td >$100 </ td >
< td >
< input type= "text" id= "txt1visible" width= "50" />
< input type= "hidden" id= "txt1hidden" value= "Should be less than 100" >
</ td >
</ tr >
< tr >
< td >February </ td >
< td >$50 </ td >
< td >
< input type= "text" id= "txt2" width= "50" />
< input type= "hidden" id= "txt2hidden" value= "Should be less than 500" >
</ td >
</ tr >
< tr >
< td >March </ td >
< td >$50 </ td >
< td >
< input type= "text" id= "txt3" width= "50" />
< input type= "hidden" id= "txt3hidden" value= "Should be less than 25" >
</ td >
</ tr >
</ table >

</ body >

</ html >