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 文件的 或 部分添加以下代码：

通过 npm 安装

使用 npm 安装：

npm install @popperjs/core

导入 Popper.js：

import { createPopper } from '@popperjs/core';

实例代码

1. 基本工具提示

以下是工具提示示例。当用户将鼠标悬停在按钮上时，工具提示将显示在按钮的上方。

image

示例代码：

    
    
    
    
    


    悬停我
    
这是一个工具提示

    

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！

– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名