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 highly customizable vanilla JS tooltip and popover library powered by Popper.js.
https://atomiks.github.io/tippyjs/
npm i tippy.js
CDN: https://unpkg.com/tippy.js/dist/
data-tippy attribute containing the tooltip content.<button data-tippy="Tooltip">Text</button>
<button data-tippy="Another tooltip">Text</button>
tippy.all.min.js script in your document, which automatically injects Tippy's CSS into <head>.<script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
<!DOCTYPE html>
<html>
<head><title>Tippy Example</title></head>
<body>
<!-- Elements with a `data-tippy` attribute -->
<button data-tippy="Tooltip">Text</button>
<button data-tippy="Another tooltip">Text</button>
<!-- Include Tippy -->
<script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
</body>
</html>
View the docs for details on all of the options you can supply to customize tooltips to suit your needs.
FAQs
The complete tooltip, popover, dropdown, and menu solution for the web
The npm package tippy.js receives a total of 992,572 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.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.