JavaScript 如何向div添加工具提示

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

语法：

< div title = "" > </div>  
<script> 
     $(document).ready(function() {$ ('[data-toggle="tooltip"]').tooltip(); 
    });  
</script>

提示工具方法：

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

提示工具事件：

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

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

示例1：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
      Bootstrap Example 
    </title> 
    <meta charset="utf-8"> 
    <meta name="viewport"
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" 
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
    
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
  </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
  </script> 
</head> 
  
<body> 
  
    <div class="container"
         title="ToolTip"> 
        <h1 class="text-center "> 
          GeeksforGeeks 
      </h1> 
        <h2 class="h4 text-center"> 
          A Computer Science Portal for Geeks 
      </h2> 
  
    </div> 
  
    <script> 
         $(document).ready(function() {$ ('[data-toggle="tooltip"]').tooltip(); 
        }); 
    </script> 
  
</body> 
  
</html>

输出：

悬停在div之前：

JavaScript 如何向div添加工具提示

悬停在div之后：

JavaScript 如何向div添加工具提示

示例2：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
      Bootstrap Example 
    </title> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1"> 
    <link rel="stylesheet" 
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
  </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
  </script> 
</head> 
  
<body> 
  
    <div class="container" 
         title="Wonders of the World"> 
        <h1 class="text-center "> 
          GeeksforGeeks 
      </h1> 
        <h2 class="h4"> 
          List of 7 Wonders of the World 
      </h2> 
        <ul> 
            <li>Great Wall of China</li> 
            <li>Petra</li> 
            <li>The Colosseum</li> 
            <li>Chichen Itza</li> 
            <li>Machu Picchu</li> 
            <li>Taj Mahal</li> 
            <li>Christ the Redeemer</li> 
        </ul> 
  
    </div> 
  
    <script> 
         $(document).ready(function() {$ ('[data-toggle="tooltip"]').tooltip(); 
        }); 
    </script> 
  
</body> 
  
</html>

输出：

在悬停在div之前：

JavaScript 如何向div添加工具提示