📌  相关文章
📜  如何在不使用 JavaScript 的情况下向 HTML 表格单元格添加工具提示?

📅  最后修改于: 2021-08-30 12:05:03             🧑  作者: Mango

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

方法一:

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

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

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

          GeeksForGeeks      

             

      

           
                                                                                                                                                                                                                                                                                                                                                                                       
Attr 1Attr 2Attr 3
1, 11, 21, 3
2, 12, 22, 3
    
                 

输出:

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

方法二:

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

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

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

          GeeksForGeeks      

             

        Hover over the 1, 2 to see the tooltip.      

           
                                                                                                                                                                                                                                                                                                                                                                      
Attr 1Attr 2Attr 3
1, 11, 2                         Tooltip                     1, 3
2, 12, 22, 3
    
    

输出:

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