Tippy.js is the complete solution for tooltip, dropdown, and dropdown menu for the web, and it’s powered by Popper. This plugin JavaScript hints library helps you add customizable, interactive, dynamic, accessible, and easy-to-touch tooltips to any DOM element.
It’s a general abstraction of the logic and design of elements that pop out of the document flow and float alongside a reference element, added above the user interface.
Key options:
- Smart: optimized positioning engine for flipping and overflow prevention
- Universal: works with a mouse, keyboard, and touch inputs
- Accessible: WAI-ARIA compliant
- Themeable: style via custom CSS, includes extra themes and animations
- Typed: TypeScript support out of the box
How to make use of it:
Install it by way of NPM:
$ npm install tippy
Import the tippy library.
import tippy from 'tippy.js'; import 'tippy.js/dist/tippy.css'; // Additional Borders import 'tippy.js/dist/border.css';
Or load the JavaScript information as displayed under your HTML doc.
<script src="https://unpkg.com/[email protected]"></script> <script src="https://unpkg.com/[email protected]"></script>
Import themes as per your needs.
import 'tippy.js/themes/light.css'; import 'tippy.js/themes/light-border.css'; import 'tippy.js/themes/material.css'; import 'tippy.js/themes/translucent.css';
Add the ‘tippy’ class to your component and outline the tooltip content utilizing the ‘data-tippy-content’ attribute like this:
<span class="tippy" data-tippy-content="I'm a tooltip!">Hover Me</span>
Initialize the tooltip library by creating a brand new Tippy object like this:
new Tippy('.tippy')
Config the tooltip utilizing the next options. Note that each one of the options is listed.
new Tippy('.tippy', { // enable accessibility a11y: true, aria: { // `null` when interactive is enabled content: 'auto', // `aria-*` attribute // `true` when interactive is enabled expanded: 'auto', // `aria-expanded` attribute }, role: 'tooltip', // allows html content allowHTML: false, // animate the background fill color animateFill: true, // more animation are: // import 'tippy.js/animations/scale.css'; // import 'tippy.js/animations/scale-subtle.css'; // import 'tippy.js/animations/scale-extreme.css'; animation: 'fade', // where the tooltip should be appended to appendTo: () => document.body, // shows the tooltip arrow arrow: false, // "sharp", "round" arrowType: 'sharp', // "scrollParent", "window", "viewport", or an HTMLElement boundary: 'scrollParent', // the content of the tippy // string, Element, or Function content: '', // animation delay delay: 0, // distance & offset in pixels offset: [5, 10], // duration of the animation duration: [325, 275], // makes the tooltip always follow the cursor followCursor: false, // hides the tooltip on click hideOnClick: true, // ignores the data-tippy-* attribute ignoreAttributes: false, // applies an inertial slingshot effect to the animation inertia: false, // enables interactive tooltip interactive: false, interactiveBorder: 2, interactiveDebounce: 0, // max width maxWidth: 350, // positions the tooltip placement: 'top', // popper.js options popperOptions: {}, // shows the tooltip on init showOnCreate: false, // "small", "regular", "large" size: 'regular', // target CSS selector target: '', // theme name // 'light', 'light-border', 'material', 'translucent' theme: '', // enables touch events touch: true, // custom trigger events trigger: 'mouseenter focus', // target trigger element triggerTarget: null, // move transition moveTransition: 'transform 0.2s ease-out', // z-index property zIndex: 9999 })
Via HTML ‘data-tippy-OPTION’ attributes:
<span class="tippy" title="I'm a tooltip!" data-tippy-OPTION="VALUE"> Hover Me </span>
Callback capabilities obtainable:
new Tippy('.tippy', { onAfterUpdate: function onAfterUpdate() {}, onBeforeUpdate: function onBeforeUpdate() {}, onCreate: function onCreate() {}, onDestroy: function onDestroy() {}, onHidden: function onHidden() {}, onHide: function onHide() {}, onMount: function onMount() {}, onShow: function onShow() {}, onShown: function onShown() {}, onTrigger: function onTrigger() {}, onUntrigger: function onUntrigger() {}, onClickOutside: function(){} })
API strategies.
// show the tippy instance.show() // hide the tippy instance.hide() // enable the tippy instance.enable() // disable the tippy instance.disable() // destroy the tippy instance.destroy() // update the tippy instance.setProps({ arrow: true, animation: 'scale', }) // set new content instance.setContent('New content')
Customizable Interactive Tooltips In Pure JavaScript, Tippy.js Plugin/Github
See Demo And Download
Official Website(atomiks): Click Here
This superior jQuery/javascript plugin is developed by atomiks. For extra Advanced usage, please go to the official website.