如何使用 JavaScript 向 div 添加工具提示？

每当鼠标悬停在 div 上时，向 div 元素添加工具提示都会显示一个弹出窗口。

句法：

< div title = "" > 

 

工具提示方法：

• .tooltip(“show”)：用于显示工具提示。
• .tooltip(“hide”)：用于隐藏工具提示。
• .tooltip(options)：用于激活工具提示。
• .tooltip(“destroy”)：用于销毁工具提示。
• .tooltip(“toggle”)：用于切换工具提示。

工具提示事件：

• show.bs.tooltip：工具提示即将显示在屏幕上。
• shown.bs.tooltip：工具提示完全显示在屏幕上。
• hide.bs.tooltip：工具提示即将隐藏。
• hidden.bs.tooltip：工具提示完全隐藏。

返回值：当用户将鼠标悬停在 div 元素上时，它会返回一个弹出窗口。

示例 1：

  

    
      Bootstrap Example
  
    
    
    
    
    
  
    
  

  

  
    
        
          GeeksforGeeks
      
        
          A Computer Science Portal for Geeks
      
  
    
  
    
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
    
  

  

输出：
在将鼠标悬停在 div 上之前：

悬停在 div 上后：

示例 2：

  

    
      Bootstrap Example
  
    
    
    
    
  
    
  

  

  
    
        
          GeeksforGeeks
      
        
          List of 7 Wonders of the World
      
        
            Great Wall of China
            Petra
            The Colosseum
            Chichen Itza
            Machu Picchu
            Taj Mahal
            Christ the Redeemer
        
  
    
  
    
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
    
  

  

输出：
在将鼠标悬停在 div 上之前：

悬停在 div 上后：

浏览器支持：支持 Tooltip 的浏览器：

• 歌剧
• IE浏览器
• 苹果浏览器
• 谷歌浏览器
• 火狐