What is popper.js
In this article, we will see what is popper.js and how to use it.
What is Popper?
This is a library built using JavaScipt to efficiently handle website poppers (eg: tooltips, popovers, dropdowns, modals, etc.).
Why Popper?
Most Bootstrap poppers are handled using the Popper library, so we link popper to our HTML pages.
How to link popper
After you download popper you need to paste that file into your project folder. Then add a <script> tag inside your HTML file and use the “src” attribute to give your popper.js file path as the value like the code below.
<script src="popper/popper.min.js" type="text/javascript"></script>Sample program
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML demo</title>
<meta name="viewport" content="width=device-width, initial-scal=1">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<input type="button" value="HTML" class="btn btn-primary” title="HTML is a structural language." data-toggle="tooltip"/>
<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script src="popper/popper.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('[data-toogle="tooltip"]').tooltip();
</script>
</body>
</html>Output:
