You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+28-27Lines changed: 28 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@
3
3
# Popper.js
4
4
5
5
<imgsrc="popperjs.png"align="right"width=250>
6
-
Popper.js is a set of libraries used to create **poppers** in web applications.
6
+
Popper.js is a library used to create **poppers** in web applications.
7
7
8
8
### Wut? Poppers?
9
9
A popper is an element on the screen which "pops out" from the natural flow of your application.
@@ -15,46 +15,47 @@ Popper.js is built from the ground up to being modular and fully ~~hackable~~ **
15
15
It supports a **plugin system** you can use to add particular behaviors to your poppers.
16
16
It's **AMD** and **CommonJS** compatible and it's well documented thanks to our [JSDoc page](https://fezvrasta.github.io/popper.js/documentation.html).
17
17
18
-
<br>
19
-
--------------
20
-
<br>
18
+
### The Library
21
19
22
-
# Popper.js Libraries
20
+
Popper.js is mostly a library with the job of making sure your popper stays near the defined reference element (if you want so).
21
+
Additionally, it provides an easy way to generate your popper element if you don't want to use one already in your DOM.
23
22
24
-
Popper.js is a set of libraries, but right now the only released one is Near.js.
25
-
26
-
## Near.js
23
+
Ok, let's stop talking, I'll show you how to use it:
27
24
28
-
Near.js (*I wanted to call it "Together.js" but seems like Mozilla already used it... Thanks, Mozilla*) is the library with the job of making sure your popper stays near the defined reference element (if you want so).
29
25
30
-
Ok, let's stop talking, I'll show you how to use it:
26
+
#### Basic usage
27
+
create a popper near a button:
31
28
32
29
```js
33
30
var reference =document.querySelector('.my-button');
34
-
var popper =document.querySelector('.the-popper');
35
-
var options = { /* more later... */ }
36
-
37
-
var thePopper =newNear(reference, popper, options); // that's all
31
+
var thePopper =newPopper(
32
+
reference,
33
+
{
34
+
content:'My awesome popper!'
35
+
},
36
+
{
37
+
// popper options here
38
+
}
39
+
});
38
40
```
39
41
40
-
It's the real badass of the family, all the hard work is on its shoulders and we'll never thank it enough for all its work!
41
-
42
-
## Popper.js
43
-
44
-
This library is still work in progress, basically will allow you to automatically create tooltips and popovers just defining their reference element.
45
-
All the hard work is done by **Near.js** under the hood, but we want to make even easier to create poppers and Popper.js will make this possible.
46
-
47
-
Here is an example of how the API will look like:
42
+
#### "Advanced" usage
43
+
given an existing popper, ask Popper.js to position it near its button
48
44
49
45
```js
50
46
var reference =document.querySelector('.my-button');
51
-
var options = { /* more later... */ };
52
-
53
-
var thePopper =newPopper(reference, options);
47
+
var popper =document.querySelector('.my-popper');
48
+
var anotherPopper =newPopper(
49
+
reference,
50
+
popper,
51
+
{
52
+
// popper options here
53
+
}
54
+
});
54
55
```
55
56
56
-
These few lines will create a new element and will initialize it using Near.js.
57
-
As you see, it's just a shorthand for what you can already do with **Near.js** right now.
57
+
If you are wondering about the available options of the third argument, check out [our documentation](http://fezvrasta.github.io/popper.js/documentation.html#new_Popper_new)
58
+
58
59
Visit our [GitHub Page](https://fezvrasta.github.io/popper.js) to see a lot of examples of what you can already do right now!
0 commit comments