<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>
How to add tooltip to HTML table
cell without using JavaScript ?
</
title
>
<
style
>
#MyTable{
border: 1px solid black;
}
#MyTable td{
border: 1px solid black;
padding: 3px;
}
</
style
>
</
head
>
<
body
align
=
"center"
>
<
h1
style
=
"color:green;"
>
GeeksForGeeks
</
h1
>
<
p
id
=
"GFG_UP"
style
=
"font-size: 15px; font-weight: bold;"
>
</
p
>
<
center
>
<
table
id
=
"MyTable"
>
<
thead
>
<
tr
>
<
td
>Attr 1</
td
>
<
td
>Attr 2</
td
>
<
td
>Attr 3</
td
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<
td
title
=
"1, 1"
>1, 1</
td
>
<
td
title
=
"1, 2"
>1, 2</
td
>
<
td
title
=
"1, 3"
>1, 3</
td
>
</
tr
>
<
tr
>
<
td
title
=
"2, 1"
>2, 1</
td
>
<
td
title
=
"2, 2"
>2, 2</
td
>
<
td
title
=
"2, 3"
>2, 3</
td
>
</
tr
>
</
tbody
>
</
table
>
</
center
>
<
script
>
var el_up = document.getElementById('GFG_UP');
el_up.innerHTML = "Hover over the cells "
+ "to see the tooltip.";
</
script
>
</
body
>
</
html
>