Tooltip libraries provide pre-built functionality and components to easily create tooltips, popovers, dropdowns, menus, and other floating elements. Which are usually anchored to another element on the page and can be triggered by different user actions, such as hover, click, or focus.
These libraries typically handle the positioning, appearance, and behavior of tooltips, making it easier to implement tooltips without having to write complex code from scratch.
Floating UI (28.7k ⭐) — A JavaScript library that helps you create and position floating elements such as tooltips, popovers, dropdowns, and more. It also provides hooks and components for building accessible user interactions with React. Floating UI is smart, flexible, and platform-agnostic. Floating UI is the evolution of Popper 2, designed to bring the project to a new level.
Tippy.js (11.7k ⭐) — A lightweight, compatible, and easy to use JavaScript library that helps you create and customize tooltips, popovers, dropdowns, and menus. It is powered by Popper.js and supports animations, themes, accessibility, and interactivity.
Tether (8.5k ⭐) — A JavaScript library that helps you position overlays, tooltips, dropdowns and other floating elements near a reference element. It also prevents them from being clipped or cut off by the viewport or other containers. Tether is lightweight, extensible, and compatible with different browsers and environments.
Hint.css (8.4k ⭐) — A CSS library that helps you create simple and elegant tooltips using only HTML and CSS. It does not require any JavaScript and supports accessibility with aria-label attributes. Hint.css offers different positions, colors, sizes, and effects for your tooltips.
Balloon.css (5k ⭐) — A CSS library that helps you create simple and elegant tooltips using only HTML and CSS. It does not require any JavaScript and supports accessibility with aria-label attributes. Balloon.css offers different positions, colors, sizes, and effects for your tooltips.
React Tooltip (3.5k ⭐) — A React library that helps you create tooltips for your React components. It is based on the react-tooltip package and supports various props and options to customize the appearance and behavior of the tooltips. React Tooltip is easy to use, accessible, and responsive.
Floating Vue (3.2k ⭐) — A Vue library that helps you create and position tooltips, dropdowns, menus and other poppers in your Vue application. It is powered by Floating UI and supports flexible configuration, powerful theming, and accessibility. Floating Vue is easy to use, compatible, and customizable.
NanoPop (640 ⭐) — A minimalistic, small, positioning engine for JavaScript. It is built for high-performance, minimal footprint and maximum control over positioning behavior. Nanopop can be used to position tooltips, popovers, dropdowns and other floating elements near a reference element.
Bootstrap Tooltips — A component of the Bootstrap (168k ⭐) framework that helps you add custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. They rely on the Popper.js library for positioning and offer various options to customize the appearance and behavior of the tooltips. Bootstrap tooltips are opt-in for performance reasons, so you must initialize them yourself.
You might also like:
Top comments (0)