資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告