Learn Popper.js | Tooltip.js Tutorials with Examples

Learn Popper.js | Tooltip.js Tutorials with Examples

In this blog post, We are going to learn a new library - popperjs|tooltipjs tutorials with examples. This includes various options and features of this framework.

Popper.js and ToolTip.js Introduction

PopperJS is an Opensource javascript framework for showing/hiding/reusing beautiful popovers and tooltips on web applications.ToolTipjs is also a framework for managing beautiful tooltips for HTML elements. Using both libraries, We can have beautiful tooltips, dropdowns popovers. It also positions the elements without modifying the DOM Context.

Features and advantages

  • Reduce development time and improve UX experience
  • Easy, Simple, and powerful API
  • Support All browsers of desktop, mobile, and tablet
  • Can integrate with JQuery/Angular/Vue/React-based applications
  • This code is written in ES2015,
  • It has no dependencies like jQuery
  • It can be customizable

Installation and Setup

PopperJS/tooltips library can be integrated into any application in the below ways.

  • Include the Local popperjs library downloaded from Github
  • Include CDN URL
  • npm and yarn package manager installation

Include Local popperjs library downloaded from Github

The latest popper.js/tooltipjs release can be downloaded from the GitHub location. Copy the js code to your project and import script URL pointed to your local js location.

<script src="location to popper.js file "></script>
<script src="location to tooltip.js file "></script>

Include CDN URL

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltip.js/1.3.0/tooltip.min.js"></script>

npm and yarn package manager installation It provides this library as npm/yarn package manager. You can also install using npm/yarn as below.

npm install popper.js --save
npm install tooltip.js --save

or

yarn add  popper.js
yarn add  tooltip.js

It installs both packages to your project.

PopperJs and ToolTipjs examples

In this below example, Displayed button, On hovering the button, Tooltip is displayed. It explains about display tooltip using javascript. We can also integrate with bootstrap and JQuery code.

<!DOCTYPE html>
<html>
<head>
<title>Popperjs/Tooltipjs Tutorials with examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltip.js/1.3.0/umd/tooltip.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
  var trigger = document.getElementsByClassName("mybutton")[0];
  var instance = new Tooltip(trigger,{
    title: trigger.getAttribute('data-tooltip'),
    trigger: "hover",
  });
});

</script>

</head>
<body>
<div align="center">
<button class="button mybutton" data-tooltip="Please Click Me"> Click Here</button>
</div>
</body>

</html>

Output is

Learn Popperjs tooltipjs Tutorials Examples

Global Objects

Popper is a global object which accepts a reference to Html Elements and popper object and Options Options Options contain below things Placements This library is used to position the elements for any elements. The following are valid values auto, top, right, bottom, and left We can also apply each placement with various variations - -start,-end Modifiers It changes the actual popup functionality. There are various modifiers like shift, offset, preventOverflow, keeptogether, arrow, flip, inner, hide,computeStyle, and applyStyle callbacks. There are various callbacks as below. OnCreate - It calls when the popup is created. onUpdate - It calls when the popup is updated Popper Example usage Here is popper object usage with all the options

var popper = new Popper(reference to HTML element,popup html element,{
                        placement: 'top',
                        onCreate: function(data){
                                console.log(data);
                        },
                        modifiers: {
                                flip: {
                                        behavior: ['left']
                                },
                                offset: {
                                        enabled: true,
                                        offset: '0,20'
                                }
                        }
                });
        });