Popper.js：ElementUI 中采用弹出，提示框库，好用的没朋友。

Hi，我贝格前端工场，继续介绍经典的js库，ElementUI 中Tooltip、Select、Cascader、TimePicker等组件中怎么把提示框定位到目标元素的，是用 Popperjs 来实现。

一、Popper.js是什么？

Popper.js是一个用于创建弹出式组件和工具提示的JavaScript库。它提供了一种灵活和可定制的方式来定位和显示弹出式元素，使得开发者可以轻松地创建各种类型的弹出式组件，如下拉菜单、工具提示、弹出框等。

二、Popper.js的核心功能

Popper.js的核心功能是计算和管理弹出式元素的位置和尺寸，以确保其正确地显示在目标元素的附近或指定的位置。它使用了一种称为"popper"的虚拟元素来表示弹出式元素，并通过计算其位置和尺寸来实现定位。

应用的组件：Tooltip 文字提示、Popover 弹出框、Popconfirm 气泡确认、Dropdown 下拉菜单、Select 选择器等。

Popper.js提供了丰富的配置选项和API，可以自定义弹出式元素的位置、偏移、边界限制等。它还支持多种触发方式，如鼠标悬停、点击、焦点等，以及多种弹出式元素的显示和隐藏动画效果。

Popper.js是一个独立的库，可以与其他前端框架和库（如React、Vue等）配合使用。它被广泛应用于各种Web应用和网站中，为用户提供更好的交互和用户体验。

三、如何使用popper.js

要使用Popper.js，你需要遵循以下步骤：

引入Popper.js库：在你的HTML文件中，通过<script>标签引入Popper.js库。你可以从官方网站 https://popper.js.org/ 下载最新版本的Popper.js，或者使用CDN链接。

创建目标元素和弹出式元素：在你的HTML文件中，创建目标元素和弹出式元素。目标元素是用户与之交互的元素，而弹出式元素是要显示的内容。

初始化Popper实例：在你的JavaScript代码中，创建一个Popper实例，并将目标元素和弹出式元素传递给它。

const target = document.getElementById('target');const popup = document.getElementById('popup');const popper = new Popper(target, popup);

配置和自定义：你可以通过传递配置选项来自定义Popper实例的行为。例如，你可以指定弹出式元素的位置、偏移、边界限制等。

const popper = new Popper(target, popup, {  placement: 'bottom',  modifiers: {    offset: {      offset: '0, 10'    },    preventOverflow: {      boundariesElement: 'viewport'    }  }});

这只是一个简单的示例，你可以根据你的需求和场景进行更多的配置和自定义。

总的来说，使用Popper.js需要引入库、创建目标元素和弹出式元素，然后初始化一个Popper实例并传递相关参数。你还可以通过配置选项来自定义Popper实例的行为和样式。这样，你就可以使用Popper.js来创建弹出式组件和工具提示等交互式元素了。详细的使用方法和API文档可以在Popper.js的官方网站上找到。