Thursday, October 4, 2018

Learn Popper.js tutorials with examples | Tooltip.js Tutorials with Examples

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

Popper.js and ToolTip.js Introduction

PopperJS is  Opensource javascript framework for show/hide/ reuse 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. This also positions the elements without modifying the DOM Context.

Features  and advantages

  • Reduce development time and Improved 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/tooltipjs  library can be integrated into any application in below ways
  • Include Local popperjs  library downloaded from Github
  • Include CDN URL
  • npm and yarn package manager installation

Include Local popperjs  library downloaded from Github

latest popper.js/tooltipjs release can be downloaded from 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 
This installs both packages to your project.

PopperJs and ToolTipjs examples 

On this below example, Displayed button, On hovering the button, Tooltip is displayed. This 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, left We can also apply each placement with various variations - -start,-end
Modifiers 
This is used to change the actual popup functionality There are various modifiers like shift, offset, preventOverflow, keeptogether, arrow, flip, inner, hide,computeStyle, applyStyle callbacks
There are various callbacks as below
OnCreate - This will be called when the popup is created
onUpdate - This will be called 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'
                                }
                        }
                });
        });

Related article


EmoticonEmoticon