tippyjs

Tippy.js is a JavaScript library that adds small pop-up elements to web pages. When a user hovers over a button, clicks a link, or focuses on an input field, Tippy can show a tooltip (a small label explaining what something does), a popover (a mini panel with more content), a dropdown menu, or any other overlay element. It handles all the positioning logic so the pop-up appears in the right place on screen, even when the page is scrolled or the window is resized.

Adding it to a project is straightforward. Developers can install it through npm or Yarn, two common package managers that JavaScript developers use to fetch third-party code, or they can paste a script tag into an HTML page to load it directly from the web via a CDN (a content delivery network that hosts files publicly). No complex setup is required: once installed, calling a single function with a reference to any page element is enough to attach a tooltip.

The library is built on top of another library called Popper, which handles the math of placing floating elements correctly next to their trigger. Tippy itself adds all the interaction behavior on top: showing and hiding the pop-up, animating it, and handling edge cases like touch screens or keyboard navigation.

For teams building with React, there is an official companion package called @tippyjs/react that wraps the core library in a component format React developers already know. An unofficial wrapper exists for Ember as well.

The README is brief and points readers to the documentation website for detailed configuration options, theming, and accessibility guidance. The library is released under the MIT license, which means anyone can use it freely in personal or commercial projects.