第二十谈：点击提示和悬停提示

本节课我们来开始学习 Bootstrap 的提供的点击和悬停提示功能；

一．悬停提示

1. 组件依赖于 Popper.js，而 Bootstrap 组件包里没有这个文件；
2. 但组件包里 bootstrap.bundle.js 已经包含了这个组件功能，使用这个即可；
3. 只要将 bootstrap.bundle.js 替代掉 bootstrap.js 即可；
4. 悬停提示，必须要脚本端进行绑定才能执行效果；

      $('[data-toggle="tooltip"]').tooltip();

      //bottom、top、left 和 right，提示位置
      <button class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="底部提示">
          悬停提示
      </button>

5. 支持通过 JS 脚本方式控制提示的各种行为操作；

      $('#button').click(function() {
          //显示
          $('[data-toggle="tooltip"]').tooltip('show');
          //隐藏
          $('[data-toggle="tooltip"]').tooltip('hide');
          //切换
          $('[data-toggle="tooltip"]').tooltip('toggle');
          //更多
      });

二．点击提示

1. 点击提示也需要脚本支持才能显示出效果；

      $('[data-toggle="popover"]').popover();

      <button class="btn btn-secondary" data-toggle="popover" data-placement="left" title="右侧提示" data-content="这是一个点击提示效果！">
          点击提示
      </button>

2. 默认情况下，离开触发环境不会自动隐藏，需要设置；

      data-trigger="focus" //设置为 hover 和悬停类似了

3. 使用脚本对 popover 进行控制；

      $('#button').click(function() {
          //显示
          $('[data-toggle="popover"]').popover('show');
          //隐藏
          $('[data-toggle="popover"]').popover('hide');
          //切换
          $('[data-toggle="popover"]').popover('toggle');
      });