Popper.js实现高效弹出内容管理

我码玄黄

于 2025-01-20 20:15:47 发布

阅读量1k

点赞数 15

分类专栏： github 前端 JavaScript 文章标签： javascript 前端 github 开源

本文链接：https://blog.csdn.net/qq_30333063/article/details/145268703

版权

前端同时被 3 个专栏收录

57 篇文章

订阅专栏

github

36 篇文章

订阅专栏

JavaScript

35 篇文章

订阅专栏

Popper.js实现高效弹出内容管理

前言

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 文件的 <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>