如何在禁用按钮上启用引导工具提示？

具有禁用类和属性的按钮或链接元素不是交互式的。这意味着用户无法聚焦、悬停或单击它们来触发工具提示（或弹出框）或任何功能。使用以下方法在禁用按钮上启用工具提示。

• 使用 jQuery
• 使用 HTML
• 使用 CSS

初始化工具提示：

• 默认情况下，工具提示通过选择指定的元素进行初始化，并使用 jQuery 调用tooltip()方法。然后将标题属性添加到包含要在工具提示中显示的文本的指定元素。
• 要定位工具提示数据放置属性，必须将其添加到指定的元素，并以顶部/底部/右侧/左侧作为其值。

// Initializing the tooltip
$(document).ready(function() { 
    $('[data-toggle="tooltip"]').tooltip();    
}); 

注意：默认情况下data-toggle=”tooltip”将启用禁用按钮的工具提示。

方法：

• 使用指定元素初始化引导禁用按钮中的工具提示并调用 tooltip() 方法。
• 通过将它们包装在 span 标签和
  div 标签中来触发禁用按钮上的工具提示，然后分别向其添加“data-toggle”、“data-placement”和“title”属性及其值。

示例：此示例通过将禁用按钮包装在 div 和 span 标签内来说明触发工具提示。

  

    Disabled Button Tooltip
  
    
    
  
    
  
    
    
  
    
    
  
    
    
    
        .disabled {
            pointer-events: all !important;
        }
    

  

  
    
  
         
            GeeksforGeeks 
        
  
        
          Disabled buttons wrapped inside an elements
        
  
        
            
              Button wrapped in Div tag
            
        
  
        
                
                  Button wrapped in span tag
                
        
    
  
    
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
    
  

  
       

输出：

示例 2：此示例使用 HTML 来显示有关任何禁用按钮上的内容的工具提示信息。为此，只需禁用按钮并在其上添加标题属性。

  

    
  
    

  

    
        
GeeksforGeeks
        
Tooltip on Disabled button
        

            
              Disabled Button
            
            Not Disabaled
        
  

  
  

输出：

示例 3：使用 CSS 在禁用的引导按钮上触发工具提示。

  

  

    

  
        
 
            GeeksforGeeks 
        
  
        

          Trigger tooltip on disabled 
          bootstrap buttons using CSS
        
  
        
          Hover over me
            
              disabled button
            
        
    
  

  

输出：