hello and welcome to Red Stapler Channel in this tutorial we will talk about popper.js
a cool JavaScript library to help you with positioning your HTML element very
quickly especially if you have something like notification box or message on your
website let's go check it out so here is the project page of popper.js
which you can get the example code and demo on each feature now let's head to
the github page and download the latest release of popper.js to start this
tutorial once downloaded the library is in your dist folder
there are a couple types of release but if you want to import it to your web
page with a script tag you need to use the one in UMD or universal module
definition folder now I have copied popper.js to the web directory and
imported with a script tag and here is the simple HTML page with a button the
orange div represent the data elements that might be on a page now
suppose that I want to add a popup message when I click the button let's
add a div element
and then make it hidden and show it when the button is clicked
now you'll see that our pop up element is displaying as block and not really
floating over normally we will need to add some more JavaScript and CSS style
to deal with the positioning but with popper.js, it's a whole lot easier just
create a new popper object as a div element or anything and then pass the
element that you want to use as a reference in this case is the button and
next the pop-up element and finally the option there are lots of options
available and the first one we'll try is the placement let's set it to top and
that's it you need to tell which placement that you need and the popper
will do the rest another awesome feature of popper.js
is it will do the flipping for you when the popup is leaving the viewport
of course you can customize the flipping behavior by adding modifiers in the
option and tell popper.js the direction that you will allow the flipping to
occur you can discover the documentation page and try other interesting modifiers
for example you can set the offset of the pop up position by adding offset
modifier like this
finally popper can return the information about positioning of the pop
up element you can pass the onCreate callback function and add data object
like this
so that's it I hope this video should give you some ideas about popper.js
hope you guys like this video as always please don't forget to like or
subscribe to support us see you on the next video bye