A tooltip is a little pop-up text window that appears when a user moves the pointer over a UI element. Tooltips allow users to view more information about an element without clicking it.
With the growing complexities of modern UIs, tooltips help developers in many scenarios, like displaying product or image information, call-to-action buttons, and image descriptions. As a result, various third-party libraries are available to implement tooltips. But it is not easy to choose one since they all have unique features.
Tippy.js is a powerful library that makes it simple to implement tooltips. It provides tooltip functionality for HTML objects that can be extended and used in various ways, including setting tooltip themes, nesting tooltips, and changing tooltip display locations.
The setup process is also quite simple, and you can install Tippy through NPM, Yarn, or a CDN to use it directly on HTML pages. The Tippy website also includes examples for each loading situation and provides detailed instructions on adding or removing features.
Tippy.js has more than 10,700 GitHub stars.
- Lightweight, user-friendly library.
- Supports all positions (top, bottom, left, right).
- Helpful callback solutions.
- Supports any HTML markup in the tooltip.
- Multiple tooltips are allowed on the same element.
You can easily install Tippy.js using NPM or Yarn as follows:
// Using NPM npm i tippy.js // Using Yarn yarn add tippy.js
Otherwise you can install it through the CDN:
<!-- Development --> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> <!-- Production --> <script src="https://unpkg.com/tippy.js@6"></script>
You can find a working demo of Tippy.js on StackBlitz.
2. Hint CSS
- 1.5 KB in size after minified and gzipped.
- No additional configurations are required.
- Supports accessibility with aria-label attributes.
- Works with all modern browsers.
You can easily install CSS.hint using NPM or CDN as follows:
// Using NPM npm install --save hint.css // Using CDN <link rel="stylesheet" href="hint.min.css" />
You can find a working demo of Hint.css on JSFiddle.
- Allows placing tooltips relative to the reference.
- Prevents tooltips from being clipped or cut off when screen size changes.
- Only 2 KB when minzipped.
- Position updates happen in less than a millisecond.
- Suitable for any UI element, including mobile views, scroll bars, and more.
- Supports multiple configurations.
You can easily install Popper using NPM or Yarn as follows:
// Using NPM npm i @popperjs/core // Using Yarn yarn add @popperjs/core
Or you can install it through the CDN:
<!-- Development --> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script> <!-- Production --> <script src="https://unpkg.com/@popperjs/core@2"></script>
You can find a working demo of Popper on StackBlitz.
4. Bootstrap Tooltip
- Tooltips with titles of zero length are automatically hidden.
- Tooltips won’t activate on hidden elements.
- Tooltips will be centered when activated by hyperlinks that cross multiple lines.
- An element inside a shadow DOM can cause tooltips to appear.
You can easily install Bootstrap Tooltip using NPM as follows:
npm i bootstrap-tooltip
You can find a working demo of Bootstrap Tooltip on StackBlitz.
5. Floating UI
Floating UI is a widely used library for anchor positioning. It allows you to create floating elements like tooltips and popovers while ensuring the main element view is not obstructed. Floating UI is only 0.6 KB in size after being minified and Brotli-compressed. However, it provides amazing features like multiple placement options, flipping, arrows, and more.
- Allow placing tooltips relative to any coordinate.
- Supports interactions for React with hooks for events like click, focus, hover, typeahead, and more.
- Dynamically position the arrow of the tooltip at the center of the element.
- Automatically change the tooltip size to keep it in the display.
- Automatically flips the tooltip position to keep it in the display.
You can easily install Floating UI using NPM as follows:
You can find a working demo of Floating UI on StackBlitz.
- Supports 12 different positions to display tooltips.
- Supports various triggers, such as hover, click, focus, and touch.
- Allows creating tooltips with images, links, or custom HTML content.
- Supports a range of animations and effects to enhance the user experience.
- Built with performance and accessibility in mind.
- Supports smart positioning based on the viewport.
You can easily install Syncfusion Tooltip using NPM as follows:
npm i @syncfusion/ej2-popups
You can find a working demo of the Syncfusion Tooltip on StackBlitz.
Note: Syncfusion offers a free Community License that allows you to access this control for free.
A tooltip can help you display extra details when a user hovers over an object on your website. It has become a powerful UI element in modern web applications.