波普尔教程以及引入

1：创建一个html文件

 

2：选择语言

 

3：输入创建框架

 

4.在body下方写一个script用来导入波普尔（注：波普尔出于各种原因，不建议通过“直接下载”它们并将它们放入源代码来管理依赖项，包括容易错过专长/修复更新。请使用 CDN 或 npm/Yarn 等版本管理系统，所以必须要联网使用。）

 

5.创建一个包含两个元素的a<button>和一个tooltip的新HTML文档<div>，并将他们传递给Popper（波普尔）:

 

6.可以给我们工具提示一些样式

 

7.可以添加箭头，我们的工具提示目前只是一个框。在许多UI设计系统中，这就是工具提示所需要的全部，但其他人更喜欢一个指向参考元素的箭头。添加具有data-popper-arrow如下属性的箭头元素：

 

现在进行造型：

 

::before伪元素是必须的，因为Popper用于将transform箭头定位在popper内部，但我们想使用我们自己transform的将箭头框旋转成菱形。现在我们需要根据popper的当前箭头偏移箭头。data-popper-placement Popper通过以下属性提供此信息：

 

为什么^=？这意味着“开始于”，因为我们也可以有变体展示位置，例如top-start.

到目前结果如下：

 

8.抵消：当我们箭头当前与参考重叠，我们可以使用修改器给他一个8px的距离offset:

 

9.功能性我们只希望在悬停或聚焦按钮时显示工具提示

 

 

 

10.完成制作：以下是完整代码：