Bootstrap4 模态框mode 提示框data-toggle="tooltip" 弹出框 data-toggle="popover"

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

 

模态框实例

 
 
    打开模态框
 
   
 
 

 
   

   
       
       

         

模态框头部

          ×
 
       
       

   
       
       

          模态框内容..
       

   
       
       

          关闭
 
       

   
     

   

 

  

模态框尺寸

我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。

尺寸类放在 

元素的 .modal-dialog 类后 :

小边框

<div class="modal-dialog modal-sm">

modal-lg的用法就是上面的大模拟框

----------------------------------------------------------------------------------------------------------------------------

如何创建提示框

通过向元素添加 data-toggle="tooltip" 来来创建提示框。

title 属性的内容为提示框显示的内容：

 

提示框实例

  百度

指定提示框的位置

默认情况下提示框显示在元素上方。

可以使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right:

 

提示框实例

  鼠标移动到我这
  鼠标移动到我这
  鼠标移动到我这
  鼠标移动到我这

指定弹出框的位置 data-placement

 

弹出框实例

  点我
  点我
  点我
  点我

取消弹出框data-trigger="focus" 

 

弹出框实例

  点我

鼠标移动时显示data-trigger 属性，并设置值为 "hover

 

弹出框实例

  鼠标移动到我这