JS定位插件popper.js

简介

Popper.js是一款功能强大的JS定位引擎，旨在提供一个可靠且可扩展的定位引擎，您可以使用它来确保所有 popper 元素都定位在正确的位置。它将定位从文档流中“弹出”并漂浮在目标元素附近的任何 UI 元素。 最常见的示例是工具提示，但它也包括弹出窗口、下拉菜单等。 所有这些都可以概括地描述为“popper”元素。

Popper 用于流行的库，如 Bootstrap、Foundation、Material UI 等。在过去几年的中，您可能已经在网络上使用过由 Popper 定位的 popper 元素。由于我们现在使用强大的抽象库（例如 React 或 Angular）编写 UI， Popper 可以与它们完全集成并与您的其他组件一起构建很好的应用。

使用

1.  引入popper.js文件。

2.  HTML

<style>
#tooltip {background-color: #333;color: white;padding: 5px 10px;border-radius: 4px;font-size: 13px;}
</style>

<button id="button" aria-describedby="tooltip">
  I'm a button
</button>
<div id="tooltip" role="tooltip">
  I'm a tooltip
</div>

3.  调用

<script src="https://unpkg.com/@popperjs/core@2"></script>

<script>
  const button = document.querySelector('#button');
  const tooltip = document.querySelector('#tooltip');
  // 传递按钮、工具提示和一些选项，Popper 将执行
  // 神奇的定位
  
  Popper.createPopper(button, tooltip, {
    placement: 'right',
  });
</script>

相关链接

官网 ：https://popper.js.org/

GitHub 地址 ：  https://github.com/popperjs/popper-core