使用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 的文件开始。在这个文件中，您需要创建两个元素，其中第一个元素将是一个 button 而第二个元素将是一个工具提示，我们将添加定位逻辑。请考虑下面显示的 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 的属性，其值可以定义我们的工具提示的位置。