<!-- IGNORE THE HTML BLOCK BELOW, THE INTERESTING PART IS AFTER IT -->
<h1 align="center">Popper.js</h1>
<p align="center">
<strong>A library used to position poppers in web applications.</strong>
</p>
<p align="center">
<img src="http://badge-size.now.sh/https://unpkg.com/popper.js/dist/popper.min.js?compression=brotli" alt="Stable Release Size"/>
<img src="http://badge-size.now.sh/https://unpkg.com/popper.js/dist/popper.min.js?compression=gzip" alt="Stable Release Size"/>
<a href="https://codeclimate.com/github/FezVrasta/popper.js/coverage"><img src="https://codeclimate.com/github/FezVrasta/popper.js/badges/coverage.svg" alt="Istanbul Code Coverage"/></a>
<a href="https://www.npmjs.com/browse/depended/popper.js"><img src="https://badgen.net/npm/dependents/popper.js" alt="Dependents packages" /></a>
<a href="https://spectrum.chat/popper-js" target="_blank"><img src="https://img.shields.io/badge/chat-on_spectrum-6833F9.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBpZD0iTGl2ZWxsb18xIiBkYXRhLW5hbWU9IkxpdmVsbG8gMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAgOCI%2BPGRlZnM%2BPHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU%2BPC9kZWZzPjx0aXRsZT5zcGVjdHJ1bTwvdGl0bGU%2BPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNSwwQy40MiwwLDAsLjYzLDAsMy4zNGMwLDEuODQuMTksMi43MiwxLjc0LDMuMWgwVjcuNThhLjQ0LjQ0LDAsMCwwLC42OC4zNUw0LjM1LDYuNjlINWM0LjU4LDAsNS0uNjMsNS0zLjM1UzkuNTgsMCw1LDBaTTIuODMsNC4xOGEuNjMuNjMsMCwxLDEsLjY1LS42M0EuNjQuNjQsMCwwLDEsMi44Myw0LjE4Wk01LDQuMThhLjYzLjYzLDAsMSwxLC42NS0uNjNBLjY0LjY0LDAsMCwxLDUsNC4xOFptMi4xNywwYS42My42MywwLDEsMSwuNjUtLjYzQS42NC42NCwwLDAsMSw3LjE3LDQuMThaIi8%2BPC9zdmc%2B" alt="Get support or discuss"/></a>
<br />
<a href="https://travis-ci.org/FezVrasta/popper.js/branches" target="_blank"><img src="https://travis-ci.org/FezVrasta/popper.js.svg?branch=master" alt="Build Status"/></a>
<a href="https://saucelabs.com/u/popperjs" target="_blank"><img src="https://badges.herokuapp.com/browsers?labels=none&googlechrome=latest&firefox=latestµsoftedge=latest&iexplore=11,10&safari=latest" alt="SauceLabs Reports"/></a>
</p>
<img src="https://raw.githubusercontent.com/FezVrasta/popper.js/master/popperjs.png" align="right" width=250 />
<!-- ð¨ HEY! HERE BEGINS THE INTERESTING STUFF ð¨ -->
## Wut? Poppers?
A popper is an element on the screen which "pops out" from the natural flow of your application.
Common examples of poppers are tooltips, popovers and drop-downs.
## So, yet another tooltip library?
Well, basically, **no**.
Popper.js is a **positioning engine**, its purpose is to calculate the position of an element
to make it possible to position it near a given reference element.
The engine is completely modular and most of its features are implemented as **modifiers**
(similar to middlewares or plugins).
The whole code base is written in ES2015 and its features are automatically tested on real browsers thanks to [SauceLabs](https://saucelabs.com/) and [TravisCI](https://travis-ci.org/).
Popper.js has zero dependencies. No jQuery, no LoDash, nothing.
It's used by big companies like [Twitter in Bootstrap v4](https://getbootstrap.com/), [Microsoft in WebClipper](https://github.com/OneNoteDev/WebClipper) and [Atlassian in AtlasKit](https://aui-cdn.atlassian.com/atlaskit/registry/).
### Popper.js
This is the engine, the library that computes and, optionally, applies the styles to
the poppers.
Some of the key points are:
- Position elements keeping them in their original DOM context (doesn't mess with your DOM!);
- Allows to export the computed informations to integrate with React and other view libraries;
- Supports Shadow DOM elements;
- Completely customizable thanks to the modifiers based structure;
Visit our [project page](https://fezvrasta.github.io/popper.js) to see a lot of examples of what you can do with Popper.js!
Find [the documentation here](/docs/_includes/popper-documentation.md).
### Tooltip.js
Since lots of users just need a simple way to integrate powerful tooltips in their projects,
we created **Tooltip.js**.
It's a small library that makes it easy to automatically create tooltips using as engine Popper.js.
Its API is almost identical to the famous tooltip system of Bootstrap, in this way it will be
easy to integrate it in your projects.
The tooltips generated by Tooltip.js are accessible thanks to the `aria` tags.
Find [the documentation here](/docs/_includes/tooltip-documentation.md).
## Installation
Popper.js is available on the following package managers and CDNs:
| Source | |
|:-------|:---------------------------------------------------------------------------------|
| npm | `npm install popper.js --save` |
| yarn | `yarn add popper.js` |
| NuGet | `PM> Install-Package popper.js` |
| Bower | `bower install popper.js --save` |
| unpkg | [`https://unpkg.com/popper.js`](https://unpkg.com/popper.js) |
| cdnjs | [`https://cdnjs.com/libraries/popper.js`](https://cdnjs.com/libraries/popper.js) |
Tooltip.js as well:
| Source | |
|:-------|:---------------------------------------------------------------------------------|
| npm | `npm install tooltip.js --save` |
| yarn | `yarn add tooltip.js` |
| Bower* | `bower install tooltip.js=https://unpkg.com/tooltip.js --save` |
| unpkg | [`https://unpkg.com/tooltip.js`](https://unpkg.com/tooltip.js) |
| cdnjs | [`https://cdnjs.com/libraries/popper.js`](https://cdnjs.com/libraries/popper.js) |
\*: Bower isn't officially supported, it can be used to install Tooltip.js only trough the unpkg.com CDN. This method has the limitation of not being able to define a specific version of the library. Bower and Popper.js suggests to use npm or Yarn for your projects.
For more info, [read the related issue](https://github.com/FezVrasta/popper.js/issues/390).
### Dist targets
Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.
- UMD - Universal Module Definition: AMD, RequireJS and globals;
- ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
- ESNext: Available in `dist/`, can be used with webpack and `babel-preset-env`;
Make sure to use the right one for your needs. If you want to import it with a `<script>` tag, use UMD.
## Usage
Given an existing popper DOM node, ask Popper.js to position it near its button
```js
var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
reference,
popper,
{
// popper options here
}
);
```
### Callbacks
Popper.js supports two kinds of callbacks, the `onCreate` callback is called after
the popper has been initialized. The `onUpdate` one is called on any subsequent update.
```js
const reference = document.querySelector('.my-button');
const popper = document.querySelector('.my-popper');
new Popper(reference, popper, {
onCreate: (data) => {
// data is an object containing all the informations computed
// by Popper.js and used to style the popper and its arrow
// The complete description is available in Popper.js documentation
},
onUpdate: (data) => {
// same as `onCreate` but called on subsequent updates
}
});
```
### Writing your own modifiers
Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".
A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this rea
jjb_chain_boy
- 粉丝: 2
- 资源: 11
最新资源
- 砂滤系统sw17全套设计资料100%好用.zip
- (176822044)PXIE协议规范,硬件开发PXIE,CPCI
- 手机平板真空贴合机.STEP全套设计资料100%好用.zip
- (176818244)基于SpringBoot+MyBatis的个人博客系统.zip
- C# opc ua客户端实例源码,带ef6+sqlite 代码有完整的注解,及包括所有的链接库和程序结构思维图 纯学习资料
- 食品垂直升降机IGS全套设计资料100%好用.zip
- 手动压榨橙汁机sw2020可编辑全套设计资料100%好用.zip
- (176818222)基于springboot + mybatis 的个人博客系统.zip
- (173588238)基于Spring Boot垂钓服务系统的设计与实现(源码+数据库)071739
- 三菱FX3U与4台台达Ms300变频器通讯程序 通讯说明:用三菱FX3U的PLC实现与4台台达ms300变频器modbus通讯 器件:三菱FX3U PLC,三菱FX3U 485BD通讯板,台达Ms30
- 四缸发动机sw17可编辑全套设计资料100%好用.zip
- 花瓣网图片大搜罗:Python爬虫实战手册
- 书籍用工业真空吸尘器step全套设计资料100%好用.zip
- 西门子S7-200模拟器bet2.5e版本支持PPI通讯modbus通讯,没有PLC也可以测试程序,支持mobus RTU,支持主站和从站通讯,支持PPI通讯,支持用户程序导入,无使用时间限制,无网络
- 碎草机sw17可编辑全套设计资料100%好用.zip
- 塔式起重机sw13可编辑全套设计资料100%好用.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈