The tippy.js npm package is a highly customizable tooltip and popover library powered by Popper.js. It is used to create and manage tooltips, popovers, and dropdowns with various effects, themes, and customization options.
Basic Tooltip
This code attaches a basic tooltip with the text 'Tooltip text' to the element with the ID 'myButton'.
tippy('#myButton', { content: 'Tooltip text' });HTML Content
This code attaches a tooltip that uses HTML content from the element with the ID 'myTemplate' to the element with the ID 'myButton'.
tippy('#myButton', { content: document.querySelector('#myTemplate') });Interactive Tooltip
This code creates an interactive tooltip that allows users to interact with the content inside the tooltip.
tippy('#myButton', { content: 'Interactive tooltip', interactive: true });Placement Options
This code positions the tooltip on the right side of the element with the ID 'myButton'.
tippy('#myButton', { content: 'Tooltip on the right', placement: 'right' });Animation Effects
This code adds a 'scale' animation effect to the tooltip shown on the element with the ID 'myButton'.
tippy('#myButton', { content: 'Animated tooltip', animation: 'scale' });Popper.js is the core engine behind tippy.js and is responsible for the positioning logic. It can be used independently for creating tooltips, but it requires more setup compared to tippy.js.
Tooltip.js is another wrapper around Popper.js that provides a simpler API for creating tooltips. It is less feature-rich and customizable than tippy.js.
React-tooltip is a tooltip component for React applications. It offers a different API tailored to React and has its own set of features and customization options, making it a good alternative for React projects.
Hint.css is a CSS-only tooltip library that requires no JavaScript. It is simpler and has fewer features compared to tippy.js, but it is lightweight and can be a good choice for basic tooltip functionality.
Tippy.js is a lightweight, pure JS tooltip library powered by Popper.js.
View the documentation and demo here: https://atomiks.github.io/tippyjs/
See releases for the CSS and JS files needed: https://github.com/atomiks/tippyjs/releases
It's also available on npm:
npm install --save tippy.js
FAQs
The complete tooltip, popover, dropdown, and menu solution for the web
The npm package tippy.js receives a total of 2,064,046 weekly downloads. As such, tippy.js popularity was classified as popular.
We found that tippy.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.