网站描述:一个轻量前端工具包，用于定位浮动元素，同时智能地将它们保持在视图中
Floating UI 一个轻量前端工具包，用于定位浮动元素，同时智能地将它们保持在视图中。工具提示、弹出框、下拉菜单、菜单等功能
安装
npm或yarn
# With npm
npm i @popperjs/core
# With Yarn
yarn add @popperjs/corecdn方式
<!-- Development version -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
<!-- Production version -->
<script src="https://unpkg.com/@popperjs/core@2"></script>使用
最简单的入门方法是从unpkg CDN导入，该CDN包含其所有功能。比如：
<!DOCTYPE html>
<title>Popper example</title>
<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>
<script src="https://unpkg.com/@popperjs/core@^2.0.0"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>当然你也可以通过引入的方式使用它：
import { createPopper } from '@popperjs/core';
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
createPopper(button, tooltip, {
placement: 'right',
});more>>
相关栏目