安装Popper.js实现高效弹出内容管理实例代码
前言
Popper.js 是一个轻量级的 JavaScript 库，用于创建动态工具提示、下拉菜单和复杂的交互式导航栏。
它能够确保这些元素根据其触发元素的位置准确显示，并且能自动适应屏幕大小的变化。
本文将介绍如何通过 CDN 和 npm 安装 Popper.js，并提供一些实现代码，展示如何使用 Popper.js 创建不同类型的弹出框。
github：https://github.com/floating-ui/floating-ui
安装 Popper.js
1. 通过 CDN 安装
使用 CDN 快速引入 Popper.js。只需在 HTML 文件的 <head> 或 <body> 部分添加以下代码：
<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. 基本工具提示
以下是工具提示示例。当用户将鼠标悬停在按钮上时，工具提示将显示在按钮的上方。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popper.js 示例 - 工具提示</title>
<script src="https://unpkg.com/@popperjs/core@^2.0.0"></script>
<style>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f9; }
.tooltip { background-color: #333; color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 14px; visibility: hidden; }
.btn { padding: 12px 24px; font-size: 16px; background-color: #6200ea; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; }
.btn:hover { background-color: #3700b3; }
</style>
</head>
<body>
<button class="btn" id="tooltipButton">悬停我</button>
<div id="tooltip" class="tooltip" role="tooltip">这是一个工具提示</div>
<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>
</body>
</html>
Popper.createPopper(button, tooltip, { placement: 'top' })
用于将工具提示（tooltip）动态定位到按钮（button）的顶部，确保工具提示始终与按钮对齐；
button.addEventListener('mouseenter', ...)
监听鼠标悬停事件，当鼠标移到按钮上时显示工具提示；
button.addEventListener('mouseleave', ...)
监听鼠标离开事件，当鼠标移出按钮时隐藏工具提示
2. 下拉菜单
以下是下拉菜单示例。当用户点击按钮时，菜单将显示在按钮的下方。这里不再贴完整代码，将弹窗改为下拉即可。
3. 弹出框
以下是弹出框示例。当用户点击按钮时，弹出框将显示在按钮的右侧。
总结
通过 Popper.js，你可以轻松创建各种动态弹出框、工具提示和下拉菜单。
本文介绍了如何安装 Popper.js，并提供了三个实例代码，展示了如何使用 Popper.js 实现不同的功能。
希望这些示例能帮助你更好地理解和使用 Popper.js！
到此这篇关于安装Popper.js实现高效弹出内容管理的文章就介绍到这了,更多相关Popper.js高效弹出内容管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了javascript匀速运动实现方法,结合实例形式分析了JavaScript匀速运动的具体实现步骤与相关注意事项,需要的朋友可以参考下2016-01-01
这篇文章主要为大家介绍了Web Components入门教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了微信小程序判断用户是否需要再次授权获取个人信息,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最近在学习echarts,今天就来介绍一下echarts实现中国地图下钻进入下一级,具有一定的参考价值,感兴趣的可以了解一下2023-08-08
这篇文章主要介绍了Javascript中的arguments与重载介绍,本文讲解了Javscript 重载、Javascript arguments不是一个数组等内容,需要的朋友可以参考下2015-03-03
本文主要介绍了js 函数参数赋值问题,包括基本类型和引用类型的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-12-12
这篇文章主要介绍了关于console.log的输出语句如何使用问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
本篇文章主要分享了javascript实现导航栏中英文切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了Cordova项目实现双击返回键退出应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了JavaScript实现两个数组的交集，给定两个数组 nums1和nums2返回它们的交集，输出结果中的每个元素一定是唯一的，下文详细介绍，需要的小伙伴可以参考一下2022-03-03
最新评论