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:
- Create a HTML table.
- Add title attribute (title = “someTitle”) to the table cell to add tooltip.
Example 1: This example implements the above approach.
<!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:
-
Before hovering over the cell:
-
After hovering over the cell:
Approach 2:
- Create a HTML table.
- Create a <span> element in the table cell in which we want to add a tooltip.
- Initially set the display: none of the <span> element.
- Whenever the user hovers over this particular element, Just change the property to display: block.
Example 2: This example implements the above approach.
<!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:
-
Before hovering over the cell:
-
After hovering over the cell: