数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
服装研究
法律研究使用 Popper.js 定位工具提示和弹出框
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 文件，我们应该看到一个按钮和一个带有文本“Simple tooltip”的工具提示。我们创建的工具提示目前实际上并不是一个工具提示，为了使其成为一个工具提示，我们需要一个指向参考元素的箭头。
我们可以通过编写以下代码片段来添加一个带有“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 及其功能来处理工具提示并定位它们。
更新于：2023年6月15日
3K+ 次浏览
广告