tippy.js

What is tippy.js?

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.

What are tippy.js's main functionalities?

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' });

Other packages similar to tippy.js

popper.js

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

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

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

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.

README

Tippy.js

The complete tooltip, popover, dropdown, and menu solution for the web

Demo and Documentation

➡️ View the latest demo & docs here

Migration Guide

Installation

Package Managers

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

Import the tippy constructor and the core CSS:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

CDN

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

The core CSS comes bundled with the default unpkg import.

Usage

For detailed usage information, visit the docs.

Component Wrappers

React: @tippyjs/react

License

MIT