📌  相关文章
📜  如何使用 jQuery 将复杂的 HTML 与 twitter Bootstrap 工具提示一起使用?

📅  最后修改于: 2021-11-24 05:47:33             🧑  作者: Mango

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
        
      
        
              
        
          
        
      
        
    
      
    
        
                   
            

    Bootstrap Tooltip Demo

               

               
                     

                                

                                

                            
      

    输出:

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

    Sign Up Sample Page

           
               
                
                                                  
                
                                                  
                   
                                                  
            
        
      

    输出: