如何在不使用 JavaScript 的情况下向 HTML 表格单元格添加工具提示？

给定一个 HTML 表格，任务是在不使用 JavaScript 的情况下向表格单元格添加工具提示。有两种方法可以解决这个问题，下面讨论：

方法一：

• 创建一个 HTML 表格。
• 将标题属性（title = “someTitle”）添加到表格单元格以添加工具提示。

示例 1：此示例实现了上述方法。

 
 
  
 
     
        How to add tooltip to HTML table
        cell without using JavaScript ?
    
      
    
        #MyTable{
            border: 1px solid black;
        }
        #MyTable td{
            border: 1px solid black;
            padding: 3px;
        }
    
 
  
 
      
     
        GeeksForGeeks 
     
      
     
    
      
    
        
            
                
                    
                    
                    
                
            
              
            
                
                    
                    
                    
                
                
                    
                    
                    
                
            
        Attr 1Attr 2Attr 31, 11, 21, 32, 12, 22, 3
    
      
     
        var el_up = document.getElementById('GFG_UP');
          
        el_up.innerHTML = "Hover over the cells "
                        + "to see the tooltip.";
     
 
  

输出：

• 在将鼠标悬停在单元格上之前：
  
• 将鼠标悬停在单元格上后：
  

方法二：

• 创建一个 HTML 表格。
• 在我们要添加工具提示的表格单元格中创建一个 元素。
• 最初设置display: none的 元素。
• 每当用户将鼠标悬停在此特定元素上时，只需将属性更改为display: block 。

示例 2：此示例实现了上述方法。

 
 
  
 
    
      
    
 
  
 
      
    
 
        GeeksForGeeks 
    
 
      
    

        Hover over the 1, 2 to see the tooltip. 
    
      
    
        
            
                
                    
                    
                    
                
            
              
            
                
                    
                    
                    
                
                    
                    
                    
                
            
        
Attr 1
Attr 2
Attr 3
1, 1
1, 2
                        Tooltip
                    
1, 3
2, 1
2, 2
2, 3
    
 
  

输出：

• 在将鼠标悬停在单元格上之前：
  
• 将鼠标悬停在单元格上后：