安裝Popper.js實現(xiàn)高效彈出內(nèi)容管理實例代碼

更新時間：2025年06月04日 11:15:58 作者：我碼玄黃

Popper.js是輕量級庫,用于創(chuàng)建動態(tài)工具提示、下拉菜單和彈出框,支持CDN和npm安裝,這篇文章主要給大家介紹了關(guān)于安裝Popper.js實現(xiàn)高效彈出內(nèi)容管理的相關(guān)資料,需要的朋友可以參考下

前言

Popper.js 是一個輕量級的 JavaScript 庫，用于創(chuàng)建動態(tài)工具提示、下拉菜單和復(fù)雜的交互式導(dǎo)航欄。

它能夠確保這些元素根據(jù)其觸發(fā)元素的位置準(zhǔn)確顯示，并且能自動適應(yīng)屏幕大小的變化。

本文將介紹如何通過 CDN 和 npm 安裝 Popper.js，并提供一些實現(xiàn)代碼，展示如何使用 Popper.js 創(chuàng)建不同類型的彈出框。

github：https://github.com/floating-ui/floating-ui

官網(wǎng)：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

導(dǎo)入 Popper.js：

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

實例代碼

1. 基本工具提示

以下是工具提示示例。當(dāng)用戶將鼠標(biāo)懸停在按鈕上時，工具提示將顯示在按鈕的上方。

示例代碼：

<!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）動態(tài)定位到按鈕（button）的頂部，確保工具提示始終與按鈕對齊；

button.addEventListener('mouseenter', ...)

監(jiān)聽鼠標(biāo)懸停事件，當(dāng)鼠標(biāo)移到按鈕上時顯示工具提示；

button.addEventListener('mouseleave', ...)

監(jiān)聽鼠標(biāo)離開事件，當(dāng)鼠標(biāo)移出按鈕時隱藏工具提示