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.<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>
<!-- Specify option via attribute -->
<button data-tippy="Another tooltip" data-tippy-delay="500">Delayed</button>
<!-- Include Tippy -->
<script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
<!-- OPTIONAL: Set the defaults for the auto-initialized tooltips -->
<script>
tippy.setDefaults({
arrow: true,
delay: 40,
theme: 'my-tippy'
})
</script>
</body>
</html>
View the docs for details on all of the options you can supply to customize tooltips to suit your needs.
IE11+: browsers that support MutationObserver and requestAnimationFrame.
FAQs
The complete tooltip, popover, dropdown, and menu solution for the web
The npm package tippy.js receives a total of 1,748,132 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.