How to add tooltip to HTML table cell without using JavaScript ? - GeeksforGeeks

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:
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
HTML | <img> align Attribute