Bootstrap中如何使用提示工具

本篇内容主要讲解“Bootstrap中如何使用提示工具”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Bootstrap中如何使用提示工具”吧!

成都网络公司-成都网站建设公司成都创新互联十年经验成就非凡，专业从事成都网站制作、做网站、外贸营销网站建设，成都网页设计，成都网页制作，软文推广，广告投放平台等。十年来已成功提供全面的成都网站建设方案，打造行业特色的成都网站建设案例，建站热线：18980820575，我们期待您的来电！

这几要讲两个控件：弹出提示（Popovers）和工具提示（Tooltips），这两个组件功能都很单一，用法也很简单，有很多相似之处。

弹出提示（Popovers）

1  示例

1.1  注意事项

使用popover插件时需要注意的事项：

• 它必须依靠bootstrap.bundle.min.js才能工作！

• 由于性能原因，popover是可选加入的，所以您必须自己初始化它们。

1.2  在任何地方启用弹出窗口

初始化页面上所有popover的一种方法是通过其data-bs-toggle属性选择它们：

  
    
    
    
    
    
    
  
  
    

        




        
            点此按钮弹出提示
        
        
      
     
     
  

1.3  使用容器选项

当父元素上的某些样式干扰popover时，您需要指定一个自定义容器，以便popover的HTML显示在该元素中。这个和上面一个在显示上没什么区别，只是在button类中增加了一个example-popover。

  
    
    
    
    
    
    
  
  
    

        




        
            点此按钮弹出提示
        
        
      
     
     
  

你也可以使用id，这样看起来似乎更好懂

  
    
    
    
    
    
    
  
  
    

        




        
            点此按钮弹出提示
        
      
     
     
  

2 改变弹出方向

我们可以让弹出的提示信息在四个方向：顶部，右侧，底部，左侧。 使用也很简单，只需要将data-bs-placement="位置" 添加到button属性即可，其中位置可以是top、bottom、left、right。

需要注意的是，要显示的位置必须有足够的空间，否则，会自动寻找合适的位置，如你设置了显示在上部，但上面已经在浏览器最上方了，则会显示在下面。

  
    
    
    
    
    
    
  
  
    

        




        
            默认
        

        
            上部
        

        
            下部
        

        
            左侧
        

        
            右侧
        
      
     
     
  

3 再一次任意处关闭

默认情况下，单击按钮显示提示消息，再次点击此按钮消息隐藏，否则消息会一直显示。 我们想再次点击任意处就关闭此前显示的提示信息，则需要给按钮增加一个data-bs-trigger="focus"属性，并在js文件中增加trigger: 'focus'。

要实现正确的跨浏览器和跨平台行为，必须使用a标记，而不是button标记，并且还必须包含tabindex属性。

  
    
    
    
    
    
    
  
  
    

        




        
        点此按钮弹出提示，点击空白处提示消失
    
      
     
     
  

工具提示（Tooltips）

工具提示（Tooltips）和弹出提示框（Popovers）非常类似，也是可选加载的，必须自己初始化。其显示方式也会 根据预留空间自动调整。与弹出提示不同的是，工具提示在鼠标悬停在按钮的时候就会显示，鼠标离开自动隐藏，不需要点击。

1 工具提示生效代码

和弹窗提示基本类似，页面中必须包含此代码，工具提示才能生效。

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})

2  工具提示示例

工具提示一般用在按钮和链接上，用以说明其功能，当然也可以用在图片上。title的值就是鼠标悬停显示的内容，可以使用html元素。

链接有默认的title属性，其提示文字显示在浏览器状态栏，这个显示的更直观。

  
    
    
    
    
    
    
  
  
    

        




        
          按钮提示
          
          链接提示

      
     
     
  

3 工具提示显示位置

跟弹窗提示一样支持四个工具提示方向，分别是top、bottom、left、right。

  
    
    
    
    
    
    
  
  
    

        




        
          顶部提示
          
          
          右侧提示
          
          
          底部提示
          
          
          左侧提示
          

      
     
     
  

4 用于文章中提示

  
    
    
    
    
    
    
  
  
    

        




        
            

                最近B站 是迎来了自己12周年的纪念日，
                之前吧，B站做过好些流行语盘点，
                比如“awsl”一类的词，不少朋友都刷过，甚至有的梗还出圈了，
                像是后那个什么浪一类的，我留意到B站官方很多时候还会做一些相关的科普盘点啥的，时不时有推送。