10 best tooltip libraries for React in 2026

Tooltips seem simple until you need them to position correctly on scroll, handle keyboard focus, pass WCAG 1.4.13, and not bloat your bundle. We installed ten tooltip options in a Vite 6 + React 19 + TypeScript 5.7 project, measured their bundle impact, and tested each against real accessibility requirements. Here's what we found.

npm install @floating-ui/react

How we evaluated these tooltip libraries

We scored each library across five criteria: bundle size (gzipped, measured via bundlephobia), TypeScript support, WCAG 1.4.13 compliance out of the box, active maintenance (commits in the last 90 days), and React 19 compatibility.

Every library was installed into the same Vite 6 starter. We built a tooltip on a button, tested keyboard dismissal with Escape, verified hover persistence (can you move your mouse into the tooltip without it vanishing?), and checked aria-describedby wiring. If a library required manual ARIA setup, we noted that.

One disclosure: this article is published on the Tour Kit blog. Tour Kit isn't a tooltip library, but our @tour-kit/hints package uses the same positioning primitives (Floating UI) under the hood. We've called this out where relevant.

Quick comparison table

1. Floating UI: best for custom positioning

Floating UI is the low-level positioning engine that powers half the libraries on this list. As of April 2026, @floating-ui/dom has 30,380 GitHub stars and 6.25 million weekly npm downloads. It replaced Popper.js and ships at roughly 3kB gzipped.

Strengths

• Tree-shakeable architecture means you only pay for the middleware you import (flip, shift, offset, arrow)
• @floating-ui/react provides hooks like useFloating, useHover, and useRole that compose into any tooltip pattern
• Works with React 19 and Server Components (the positioning logic runs client-side)
• Written in TypeScript with full type exports

Limitations

• You wire up every ARIA attribute yourself. No role="tooltip" or aria-describedby out of the box
• Building a fully accessible tooltip from Floating UI primitives takes 40-60 lines of code
• No built-in animations or themes

Pricing

$0 (MIT open source)

Best for: Teams that want total control over tooltip behavior and already use Floating UI for popovers, dropdowns, or other positioned elements.

2. Radix UI Tooltip: best for design systems

Radix UI Tooltip wraps Floating UI positioning inside an accessible, unstyled component API. If you use shadcn/ui, you already have it. The compound component pattern (Tooltip.Provider, Tooltip.Root, Tooltip.Trigger, Tooltip.Content) handles ARIA wiring, keyboard dismissal, and hover persistence automatically.

Strengths

• WCAG 1.4.13 compliant without configuration: Escape dismisses, hover persists, aria-describedby wired
• Compound components compose naturally with any styling approach
• Shared delay groups prevent tooltip flickering when moving between adjacent triggers
• Part of the Radix ecosystem with consistent API patterns

Limitations

• Unstyled means you write all the CSS yourself (though shadcn/ui provides defaults)
• The compound component API is verbose for simple one-off tooltips
• Adds ~6kB gzipped on top of whatever else you import from Radix

Pricing

$0 (MIT open source)

Best for: React teams using shadcn/ui or building their own design system on Radix primitives.

3. react-tooltip: best for quick prototyping

react-tooltip is the "install and forget" option. Add a data-tooltip-id attribute to any element, drop in a <Tooltip /> component, and you have a working tooltip. As of April 2026, it pulls 647K weekly npm downloads and has 3,642 GitHub stars.

Strengths

• Declarative API with data-tooltip-* attributes reduces boilerplate to near zero
• Built-in HTML content support, click-to-open mode, and multiple positioning strategies
• TypeScript types included since v5

Limitations

• Bundle size is the elephant in the room. The unminified package weighs 889KB, largely due to sanitize-html for HTML content parsing (GitHub issue #441 documents developers complaining they "don't use 80% of the features")
• WCAG 1.4.13 compliance is incomplete: hover persistence behavior varies across versions
• The data-attribute API pattern doesn't compose well with React's component model

Pricing

$0 (MIT open source)

Best for: Prototypes, internal tools, or projects where bundle size isn't a primary concern.

4. Tippy.js: battle-tested but showing its age

Tippy.js powered millions of tooltips over the last five years. Its React wrapper @tippyjs/react still works. But Floating UI (Tippy's positioning engine) has moved on, and the React wrapper hasn't kept pace with React 19's changes.

Strengths

• Extensive plugin system: animations, follow cursor, sticky positioning
• Solid documentation with interactive playground
• Mature codebase with years of edge case handling

Limitations

• The maintainers describe it as "legacy" and recommend Floating UI for new projects
• Ships ~10kB gzipped, 3x heavier than Floating UI alone
• React 19 compatibility requires workarounds for ref forwarding changes

Pricing

$0 (MIT open source)

Best for: Existing projects already using Tippy.js where migration isn't worth the effort.

5. Ariakit Tooltip: best accessibility-first headless option

Ariakit (formerly Reakit) takes the headless approach with accessibility as the hard requirement, not an afterthought. The tooltip component handles role="tooltip", aria-describedby, keyboard dismissal, and focus management out of the box while letting you own the markup entirely.

Strengths

• Full WCAG 1.4.13 compliance baked into the component logic
• Truly headless: zero CSS shipped, renders your markup
• Composable with Ariakit's other primitives (Popover, Dialog, Menu)
• ~4kB gzipped for the tooltip module

Limitations

• Smaller community than Radix (fewer ready-made recipes and examples)
• Documentation can be sparse for advanced composition patterns

Pricing

$0 (MIT open source)

Best for: Teams that need WCAG compliance without adopting an entire design system.

6. React Aria Tooltip (Adobe): enterprise accessibility

React Aria is Adobe's accessibility-first hook library. The useTooltipTrigger and useTooltip hooks handle every ARIA requirement and work with Adobe's Spectrum design system or your own.

Strengths

• Most thorough ARIA implementation of any option on this list. Adobe's accessibility team maintains it
• Hooks-based API gives you full rendering control
• Comprehensive touch device handling (shows tooltip on long press)
• Enterprise-grade test coverage

Limitations

• The learning curve is steep. React Aria's documentation assumes familiarity with WAI-ARIA patterns
• Pulls in several @react-aria/* and @react-stately/* peer packages (~8kB total)
• Verbose API for simple use cases

Pricing

$0 (Apache 2.0 open source)

Best for: Enterprise applications with strict accessibility auditing requirements.

7. MUI Tooltip: best for Material UI projects

If your project runs on Material UI, the <Tooltip> component is already in your bundle. It handles positioning, ARIA, animations, and theming through MUI's system. No reason to add another library.

Strengths

• Zero additional bundle cost if MUI is already installed
• Follows Material Design specs with sensible defaults
• Touch delay handling and customizable enter/leave delays
• Integrates with MUI's sx prop and theme system

Limitations

• Unusable outside MUI projects (depends on the full MUI runtime)
• Overriding styles requires understanding MUI's specificity layers
• Touch behavior uses a long-press delay that confuses some users

Pricing

$0 (MIT open source)

Best for: Projects already committed to Material UI.

8. Chakra UI Tooltip: best for Chakra projects

Same logic as MUI: if you're on Chakra UI, use their tooltip. Chakra v3 rebuilt tooltips on top of Ark UI (which uses Floating UI internally), so the positioning engine is modern even if the API is opinionated.

Strengths

• Style props work directly on the tooltip: <Tooltip bg="gray.800" color="white">
• Accessible by default with proper ARIA wiring
• Chakra v3's new architecture shares primitives with Ark UI and Zag.js

Limitations

• Tied to the Chakra runtime. Not an option for Tailwind-only or unstyled projects
• Chakra v3 migration introduced breaking changes to the tooltip API
• Heavy if Chakra is only used for tooltips

Pricing

$0 (MIT open source)

Best for: Projects already using Chakra UI v3.

9. Browser Popover API: zero-dependency native option

The Popover API shipped in all major browsers in 2024 and is ready for production in 2026. It handles show/hide, Escape dismissal, and light-dismiss (clicking outside) natively. Pair it with CSS anchor positioning (Chrome 125+) and you get tooltip-like behavior with zero JavaScript.

As Godstime Aburu wrote in Smashing Magazine (March 2026), the Popover API "shifts responsibility from recreating brittle infrastructure to solving specific product problems." What took ~60 lines of JavaScript with five event listeners now takes ~10 lines of declarative HTML.

Strengths

• 0kB JavaScript. The browser does the work
• Built-in Escape dismissal and focus restoration
• Top layer rendering eliminates z-index wars
• Works with any framework or no framework at all

Limitations

• CSS anchor positioning (needed for auto-placement) isn't in Firefox or Safari yet as of April 2026
• No aria-describedby wiring. You still handle ARIA attributes manually
• Not a tooltip per se. The Popover API creates popovers; adapting them for tooltip semantics requires care

Pricing

$0 (browser-native)

Best for: Projects that can progressively enhance and don't need full cross-browser anchor positioning today.

10. CSS-only tooltips: when you truly need zero JS

A [data-tooltip]::after pseudo-element with content: attr(data-tooltip) gives you a tooltip in pure CSS. No library, no JavaScript, no bundle cost.

Strengths

• Zero runtime cost. Not even hydration overhead
• Works in static HTML, MDX, and server-rendered pages
• Simple to implement: 15-20 lines of CSS

Limitations

• Fails WCAG 1.4.13 on every count: no keyboard trigger, no hover persistence, no Escape dismissal
• No dynamic positioning or collision detection. The tooltip can overflow the viewport
• Completely inaccessible on touch devices

As Sarah Higley writes: "From the very beginning, the behavior of a native tooltip has made it easy to create content solely for mouse users with good vision while forgetting about everyone else."

Pricing

$0

Best for: Decorative hints on mouse-only internal tools where accessibility requirements are minimal. (Be honest about this tradeoff.)

When tooltips aren't enough: contextual onboarding

Tooltips show supplementary information on hover. But if you need to guide users through a multi-step flow, highlight new features, or trigger actions based on context, you need a different primitive.

Tour Kit's @tour-kit/hints package uses Floating UI for positioning but adds step sequencing, conditional display, dismissal tracking, and analytics. It's the tool for when a tooltip needs to be smarter than "show text on hover."

npm install @tourkit/core @tourkit/hints

We built Tour Kit, so take this with appropriate skepticism. But if you're evaluating tooltip libraries because you actually need guided onboarding, check the docs before bolting tooltip logic onto a use case it wasn't designed for.

How to choose the right tooltip library for your project

Floating UI works best when you want the positioning engine without opinions about rendering, and your team can handle the ARIA wiring.

Radix UI Tooltip fits naturally if you use shadcn/ui or want accessible, unstyled components that compose into a design system.

For a working tooltip in five minutes where bundle size isn't a constraint, react-tooltip gets the job done.

Ariakit or React Aria make sense when your project has strict WCAG requirements. Compliance is built into the primitives, not layered on after.

If you're already on MUI or Chakra, use their tooltip. Adding a second tooltip library creates complexity with no benefit.

The Popover API eliminates tooltip JavaScript entirely, but only if your browser support matrix allows it.

And if what you actually need is guided onboarding or contextual hints, skip tooltips. A tooltip library won't give you step sequencing, conditional logic, or completion tracking.

FAQ

What is the best tooltip library for React in 2026?

Floating UI is the best low-level positioning library for React in 2026, with 6.25M weekly downloads and ~3kB gzipped. For an accessible higher-level component, Radix UI Tooltip wraps Floating UI with WCAG 1.4.13 compliance out of the box.

Is Tippy.js still maintained in 2026?

Tippy.js is in maintenance mode as of April 2026. The library still works and receives security patches, but active development has moved to Floating UI, which Tippy.js used internally for positioning. New projects should use Floating UI or Radix UI Tooltip instead.

Do React tooltips need to be accessible?

Yes. WCAG 1.4.13 requires tooltips to be dismissable via Escape, hoverable without disappearing, and persistent until the user dismisses them. Radix, Ariakit, and React Aria handle this automatically. CSS-only tooltips fail every requirement.

Can I use the Popover API for tooltips in React?

The browser Popover API handles show/hide and light-dismiss natively with zero JavaScript. Pair it with CSS anchor positioning (Chrome 125+) for geometric placement. The main gap as of April 2026: anchor positioning isn't in Firefox or Safari yet, and you still need to wire ARIA attributes manually.

When should I use a tooltip vs a product tour?

Use a tooltip when you need to show supplementary text on hover or focus for a single element. Use a product tour library (like Tour Kit) when you need multi-step guidance, conditional step logic, completion tracking, or feature announcements that persist beyond a single hover interaction.

Related articles

ListiclesApr 7, 2026 · 11 min read

5 best alternatives to building onboarding in-house

Compare 5 alternatives to building product tours from scratch. See real costs, bundle sizes, and accessibility scores to pick the right onboarding approach.

Read article

ListiclesApr 7, 2026 · 9 min read

8 best onboarding Chrome extensions for product teams (2026)

Compare the top onboarding Chrome extensions side by side. We tested 8 tools on pricing, accessibility, and design flexibility to help your team pick.

Read article

ListiclesApr 7, 2026 · 11 min read

5 best onboarding solutions with real analytics (not vanity)

Compare 5 onboarding tools that track activation rate and feature adoption, not just tours started. Pricing, bundle size, and analytics depth reviewed.

Read article

ListiclesApr 7, 2026 · 14 min read

Onboarding tools ranked by customer reviews (G2 + Capterra data)

Compare 10 onboarding tools using real G2 and Capterra ratings, review counts, and developer feedback. Pricing, complaints, and open-source options included.

Read article