Popper.js 示例 - HTML

本文介绍了如何使用 Popper.js 库来创建交互式的弹出窗口和工具提示。

引入 Popper.js

首先，我们需要在 HTML 文件中引入 Popper.js 库。可以从官方网站下载并将其放入项目目录中，然后使用 <script> 标签引入：

<script src="path/to/popper.js"></script>

创建一个弹出窗口

接下来，让我们看一个简单的示例，演示如何创建一个弹出窗口。

首先，在 HTML 中创建一个按钮和一个隐藏的弹出窗口：

<button id="myButton">点击我</button>

<div id="myPopover" style="display: none;">
  这是一个弹出窗口！
</div>

然后，在 JavaScript 中，初始化 Popper.js 实例并将其绑定到按钮上，以触发弹出窗口：

<script>
  // 初始化 Popper.js
  const button = document.getElementById('myButton');
  const popover = document.getElementById('myPopover');
  
  const popper = new Popper(button, popover, {
    placement: 'bottom'
  });
  
  // 当按钮被点击时，显示/隐藏弹出窗口
  button.addEventListener('click', function() {
    popover.style.display = (popover.style.display === 'none') ? 'block' : 'none';
  });
</script>

通过上述代码，当按钮被点击时，将显示或隐藏弹出窗口，位置位于按钮的下方。你还可以通过 placement 选项来调整弹出窗口的位置，例如 'top'、'left'、'right' 等。

创建一个工具提示

除了弹出窗口，Popper.js 也可以用来创建工具提示。下面是一个示例：

首先，在 HTML 中创建一个带有工具提示的元素：

<div class="tooltip" data-tooltip="这是一个工具提示！">Hover me</div>

然后，在 JavaScript 中初始化 Popper.js 实例来显示工具提示：

<script>
  // 初始化 Popper.js
  const tooltip = document.querySelector('.tooltip');
  
  const popper = new Popper(tooltip, tooltip, {
    placement: 'top'
  });
  
  // 当鼠标悬停在元素上时，显示工具提示
  tooltip.addEventListener('mouseenter', function() {
    tooltip.setAttribute('data-show', '');
  });
  
  // 当鼠标离开元素时，隐藏工具提示
  tooltip.addEventListener('mouseleave', function() {
    tooltip.removeAttribute('data-show');
  });
</script>

通过上述代码，当鼠标悬停在元素上时，将显示工具提示，位置位于元素的上方。你同样可以通过 placement 选项来调整工具提示的位置。

以上就是使用 Popper.js 创建弹出窗口和工具提示的示例。你可以根据需要进行个性化设置，例如更改样式、位置等。希望本文对你有所帮助！