如何使用 jQuery 将复杂的 HTML 与 twitter Bootstrap 工具提示一起使用？

Bootstrap 工具提示以图形方式为我们提供有关特定元素的提示。出于性能原因使用工具提示，因此可以根据需求域对其进行自定义。工具提示是使用 javascript 实现的，它依赖于称为 popper.js 的 3rd 方库进行定位。

它适用于使用光标指针悬停的概念，当指针悬停在元素上时，提示可能会按照代码中的指示在任何 4 个方向（左、右、上和下）上弹出/出现。

一些通用示例：

• 在登录页面中，密码工具提示弹出要求，例如长度应为 8 个字符，以大写字母开头等。
• 对于名称，它可能会弹出只需要输入名字而无需输入中间名或姓氏。

JavaScript 片段

// Write Javascript code here
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

注意：使用了HTML、CSS、Bootstrap、JavaScript 和 jQuery。

• 方法一：

下面的实现是为 4 个按钮向左、向右、向上和向下完成的，当光标悬停在按钮上时，它们分别指示按钮的位置。

  

    
      
    
        HTML with twitter Bootstrap 
        tooltip using jQuery
    
  
    
          
    
    
      
    
    
  
    
        $(document).ready(function() {
            $("#toptip").tooltip({
                placement: "top"
            });
  
            $("#bottomtip").tooltip({
                placement: "bottom"
            });
  
            $("#lefttip").tooltip({
                placement: "left"
            });
  
            $("#righttip").tooltip({
                placement: "right"
            });
        });
    

  

    
          
    
        Bootstrap Tooltip Demo
      
    
      
    
        
            Top Tooltip demo
        
        
          
        
            Bottom Tooltip demo
        
        
          
        
            Left Tooltip demo
        
        
          
        
            Right Tooltip demo
        
    

  

输出：


• 方法 2：下面的实现是一个注册页面，带有用于提供提示/推荐的工具提示。 HTML 中的表单标签用于创建表单并相应地添加工具提示属性。

    
  
      Bootstrap Grid
      
      
    
      
      
      
      
    
      
      
      
    
      
          $(document).ready(function() {
              $('#name').tooltip({
                  'trigger': 'focus',
                  'title': 'Name is Required'
              });
    
              $('#email').tooltip({
                  'trigger': 'focus',
                  'title': 'Email is Required'
              });
    
              $('#password').tooltip({
                  'trigger': 'focus',
                  'title': "Password is Required"
              });
          });
      
      
          .serif {
              font-family: "Times New Roman", Times, serif;
          }
            
          p {
              padding: 20px;
          }
      
  
    
  
      Sign Up Sample Page
    
      
    
          
              
                  Name
                  
              
              
                  Email
                  
              
    
              
                  Password
                  
              
          
      
  
    

  输出：