How to add tooltip to HTML table cell without using JavaScript ?
Last Updated :
11 Sep, 2019
Improve
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: