引导程序(第9部分)|工具提示

在本文中，我们将讨论bootstrap提供的工具提示插件。工具提示对于显示网页中不同元素的描述非常有用。可以在网页中的任何元素上调用工具提示。
引导程序上的工具提示取决于第3方库Tether的位置。

因此，我们需要在bootstrap.js之前包含tether.min.js

现在，让我们看一下工具提示的示例。

现在，我们将检查生成上述工具提示的代码

    Hover Over me to see a tooltip

为了介绍工具提示，我们将data-toggle属性添加到元素中，并且需要使用jQuery初始化工具提示。

用于初始化工具提示的jQuery代码：

// jQuery code for initializing a tooltip
$(document).ready(function () 
{
    // jQuery Attribute value selector to 
    // select the specified element and 
    // call the tooltip method on it
    $('[data-toggle="tooltip"]').tooltip();
});

我们甚至可以根据需要自定义此工具提示，让我们探索自定义工具提示的不同方法。

• 工具提示的放置：我们可以将工具提示放置在元素的顶部，底部，左侧和右侧。
  例子：
  

  上面示例的代码：

  
  
  
      
  
          
              Information 
          
      
      
  
          
              Success
          
      
        
      
  
          
               Danger
          
      
      
  
          
               Warning
          
      
  
  

  在上面的代码中，我们使用了data-placement属性来设置工具提示的位置，我们还使用了Bootstrap网格系统提供的row和col类

• HTML中的HTML ：我们可以将html添加为tootlip的内容。
  例子：
  

  上面示例的代码：

  
  
      
            Warning
      
  
  

  在上面的代码中，我们使用了data-html属性，以便在工具提示中添加html。

• 工具提示的偏移量：我们可以设置工具提示相对于目标的偏移量。
  例子：
  

  上面示例的代码：

  
      
          Warning
      
  
  

  在上面的代码中，我们使用了data-offset属性来设置属性

注意：以下所有代码的输出都是非静态的，因此此处未显示输出。

• 工具提示上的动画：
  默认情况下，动画会添加到工具提示中，即它会淡入和淡出，我们可以删除该动画。

  
  
      
           Warning
      
  
  

  在上面的代码中，我们使用了data-animation属性，并将其设置为false以便从工具提示中删除动画

• 出现和消失的延迟：我们可以设置工具提示出现和消失的时间间隔。
  我们可以通过两种方式设置延迟：
  1. 我们为显示和隐藏设置了相同的延迟时间

     
     
         
              Warning
         
     
     

     在上面的代码中，我们使用了data-delay属性来延迟分配给该属性的工具提示编号，单位为ms，即工具提示将延迟1000 ms。

  2. 我们可以为显示和隐藏工具提示添加不同的延迟时间间隔。
     HTML程式码：

     
     
         
              Warning
         
     
     

     html代码中没有任何更改。
     jQuery代码：

         $(document).ready(function () 
         {
             // jQuery Attribute value selector
             $('[data-toggle="tooltip"]').tooltip({
                 delay: { "show": 1000, "hide": 2000 }
             });
         });

• 工具提示的触发：我们可以添加一个事件，该事件将触发工具提示，默认情况下会在“悬停并聚焦”时触发工具提示，允许的各种事件包括单击，悬停，聚焦和手动。

  
  
      
            Warning
      
  
  

  在上面的代码中，我们使用了data-trigger属性并将value设置为click ，这意味着当用户单击元素时，工具提示将出现