Last Updated : 11 Sep, 2019
Given an HTML table and the task is to add a tooltip to the table cell without using JavaScript. There are two methods to solve this problem which are discussed below:
Approach 1:This example implements the above approach.
html
<!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>
Output: Approach 2:
This example implements the above approach.
html
<!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;
}
.parentCell{
position: relative;
}
.tooltip{
display: none;
position: absolute;
z-index: 100;
border: 1px;
background-color: white;
border: 1px solid green;
padding: 3px;
color: green;
top: 20px;
left: 20px;
}
.parentCell:hover span.tooltip{
display:block;
}
</style>
</head>
<body align = "center">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
Hover over the 1, 2 to see the tooltip.
</p>
<center>
<table id="MyTable">
<thead>
<tr>
<td>Attr 1</td>
<td>Attr 2</td>
<td>Attr 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1, 1</td>
<td class="parentCell">1, 2
<span class="tooltip">Tooltip</span>
</td>
<td>1, 3</td>
<tr>
<td>2, 1</td>
<td>2, 2</td>
<td>2, 3</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Output:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4