使用 Popper.js 定位工具提示和弹出窗口
javascriptweb developmentfront end technology更新于 2024/8/15 20:16:00
Popper.js 是一个 JavaScript 库，当我们想要构建弹出窗口和工具提示并对其进行管理时，可以使用它。它帮助我们在大多数现代 Web 应用程序中定位工具提示和弹出窗口。在本教程中，我们将展示如何使用 Popper.js 来定位工具提示，但需要注意的是，Popper 不仅仅是关于工具提示，它在某种程度上是构建工具提示的基础。
让我们从一个小例子开始
让我们创建一个带有按钮的简单工具提示，以了解如何使用 popper.js。
第一步是在我们的机器上安装 popper.js。虽然有多种方法可以做到这一点，但在本教程中，我们将仅使用 CDN 链接。我们需要将以下代码片段放在 <body> 标记内，就在关闭 <body> 标记之前。
<script src="https://unpkg.com/@popperjs/core@2"></script>
index.html
示例
现在让我们开始处理核心 index.html 文件。
首先创建一个名为 index.html 的文件。在此文件中，您需要创建两个元素，其中第一个元素将是 按钮，第二个元素将是工具提示，我们将向其中添加定位逻辑。请考虑下面显示的 index.html 文件。
<!DOCTYPE html>
<html>
<head>
<title>Popper Tooltip Example</title>
</head>
<body>
<button id="button" aria-describedby="tooltip">My button</button>
<div id="tooltip" role="tooltip">My tooltip</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script>
const myButton = document.querySelector('#button');
const myTooltip = document.querySelector('#tooltip');
const popperInstance = Popper.createPopper(myButton, myTooltip);
</script>
</body>
</html>
更新的 index.html 文件
示例
虽然基本视图模板的 HTML 部分可能已经完成，但样式部分尚待完成。在样式部分，我们将向当前页面添加以下样式。
<!DOCTYPE html>
<html>
<head>
<title>Popper Tutorial</title>
<style>
body {
text-align: center;
margin: 0 auto;
}
#tooltip {
background: #333;
color: white;
font-weight: bold;
padding: 4px 8px;
font-size: 13px;
border-radius: 4px;
display: none;
}
</style>
</head>
<body>
<button id="button" aria-describedby="tooltip">My button</button>
<div id="tooltip" role="tooltip">Simple tooltip</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script>
const myButton = document.querySelector('#button');
const myTooltip = document.querySelector('#tooltip');
const popperInstance = Popper.createPopper(myButton, myTooltip);
</script>
</body>
</html>
如果我们在浏览器中运行上面显示的 html 文件，我们应该会看到一个按钮和一个带有文本"简单工具提示"的工具提示。我们创建的工具提示目前实际上并不是一个工具提示，为了使其成为一个工具提示，我们需要一个指向参考元素的箭头。
我们可以通过编写下面显示的代码片段来放置一个带有"data-popper-arrow"的箭头元素。
<div id="tooltip" role="tooltip"> Simple tooltip <div id="arrow" data-popper-arrow></div> </div>
我们制作的第一个属性是"display:none;"，它用于已经存在的带有"id = tooltip"的标签。接下来是 JavaScript 功能部分。请考虑下面显示的代码。
#arrow,
#arrow::before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
#arrow {
visibility: hidden;
}
#arrow::before {
visibility: visible;
content: '';
transform: rotate(45deg);
}
现在一切都完成了。最终的 index.html 代码如下所示。
最终的 index.html 文件
示例
<!DOCTYPE html>
<html>
<head>
<title>Popper Tutorial</title>
<style>
body {
text-align: center;
margin: 0 auto;
}
#tooltip {
background: #333;
color: white;
font-weight: bold;
padding: 4px 8px;
font-size: 13px;
border-radius: 4px;
display: none;
}
#tooltip[data-show] {
display: block;
}
#arrow,
#arrow::before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
#arrow {
visibility: hidden;
}
#arrow::before {
visibility: visible;
content: '';
transform: rotate(45deg);
}
#tooltip[data-popper-placement^='top']>#arrow {
bottom: -4px;
}
#tooltip[data-popper-placement^='bottom']>#arrow {
top: -4px;
}
#tooltip[data-popper-placement^='left']>#arrow {
right: -4px;
}
#tooltip[data-popper-placement^='right']>#arrow {
left: -4px;
}
</style>
</head>
<body>
<button id="button" aria-describedby="tooltip">My button</button>
<div id="tooltip" role="tooltip">Simple tooltip
<div id="arrow" data-popper-arrow></div>
</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script>
const myButton = document.querySelector('#button');
const myTooltip = document.querySelector('#tooltip');
const popperInstance = Popper.createPopper(myButton, myTooltip, {
modifiers: [{
name: 'offset',
options: {
offset: [0, 8],
},
}, ],
});
function show() {
tooltip.setAttribute('data-show', '');
popperInstance.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,{
name: 'eventListeners',
enabled: true
},
],
}));
popperInstance.update();
}
function hide() {
tooltip.removeAttribute('data-show');
popperInstance.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,{
name: 'eventListeners',
enabled: false
},
],
}));
}
const showEvents = ['mouseenter', 'focus'];
const hideEvents = ['mouseleave', 'blur'];
showEvents.forEach((event) => {
button.addEventListener(event, show);
});
hideEvents.forEach((event) => {
button.addEventListener(event, hide);
});
</script>
</body>
</html>
在上面的代码中，在 createPopper 函数中，我们甚至可以添加一个名为 placement 的属性，其值可以定义工具提示的位置。
结论
在本教程中，我们解释了如何使用 popper.js 及其功能来处理工具提示并定位它们。
