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