Popper.js实现高效弹出内容管理
前言
image
Popper.js 是一个轻量级的 JavaScript 库，用于创建动态工具提示、下拉菜单和复杂的交互式导航栏。
它能够确保这些元素根据其触发元素的位置准确显示，并且能自动适应屏幕大小的变化。
本文将介绍如何通过 CDN 和 npm 安装 Popper.js，并提供一些实现代码，展示如何使用 Popper.js 创建不同类型的弹出框。
github：https://github.com/floating-ui/floating-ui
官网：https://floating-ui.com/
安装 Popper.js
1. 通过 CDN 安装
使用 CDN 快速引入 Popper.js。只需在 HTML 文件的 或 部分添加以下代码：
<script src="https://unpkg.com/@popperjs/core@^2.0.0"></script>
通过 npm 安装
使用 npm 安装：
npm install @popperjs/core
导入 Popper.js：
import { createPopper } from '@popperjs/core';
实例代码
1. 基本工具提示
以下是工具提示示例。当用户将鼠标悬停在按钮上时，工具提示将显示在按钮的上方。
image
示例代码：
Popper.js 示例 - 工具提示
<script src="https://unpkg.com/@popperjs/core@^2.0.0"></script>
这是一个工具提示
<script>
const button = document.getElementById('tooltipButton');
const tooltip = document.getElementById('tooltip');
Popper.createPopper(button, tooltip, {
placement: 'top',
});
button.addEventListener('mouseenter', () => {
tooltip.style.visibility = 'visible';
});
button.addEventListener('mouseleave', () => {
tooltip.style.visibility = 'hidden';
});
</script>
Popper.createPopper(button, tooltip, { placement: 'top' })
用于将工具提示（tooltip）动态定位到按钮（button）的顶部，确保工具提示始终与按钮对齐；
button.addEventListener('mouseenter', ...)
监听鼠标悬停事件，当鼠标移到按钮上时显示工具提示；
button.addEventListener('mouseleave', ...)
监听鼠标离开事件，当鼠标移出按钮时隐藏工具提示
2. 下拉菜单
以下是下拉菜单示例。当用户点击按钮时，菜单将显示在按钮的下方。这里不再贴完整代码，将弹窗改为下拉即可。
image
3. 弹出框
以下是弹出框示例。当用户点击按钮时，弹出框将显示在按钮的右侧。
image
总结
通过 Popper.js，你可以轻松创建各种动态弹出框、工具提示和下拉菜单。
本文介绍了如何安装 Popper.js，并提供了三个实例代码，展示了如何使用 Popper.js 实现不同的功能。
希望这些示例能帮助你更好地理解和使用 Popper.js！
– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名