Popper.js Tutorial in 3 Minutes


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

Add a Comment

Your email address will not be published. Required fields are marked *