react-tippy

library1.4.0jsnpmunverified

react-tippy is a React wrapper for the popular tippy.js tooltip library, leveraging Popper.js for precise positioning. Currently at version 1.4.0, it provides a lightweight and flexible way to integrate tooltips into React applications. The library offers both a <Tooltip> component for declarative usage and a withTooltip higher-order component (HOC) for more advanced scenarios, such as wrapping existing components. A key differentiator is its use of React DOM to render tooltip content, allowing full access to React features within the tooltip itself, including integration with state management libraries like Redux. TypeScript support was introduced in v1.3.0. While an exact release cadence isn't explicitly stated, the project sees regular maintenance updates for bug fixes and feature enhancements, such as the v1.3.1 release for exception guards.

web-framework

npm install react-tippy

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TIPPY

react-tippy

web-frameworkjavascriptv1.4.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Tooltip

✓ import { Tooltip } from 'react-tippy';

✗ const Tooltip = require('react-tippy').Tooltip;

Standard named export for the primary component.

withTooltip

✓ import { withTooltip } from 'react-tippy';

✗ const withTooltip = require('react-tippy').withTooltip;

Standard named export for the Higher-Order Component pattern.

CSS Styles

✓ import 'react-tippy/dist/tippy.css';

✗ import { CSS } from 'react-tippy';

Essential stylesheet for default tooltip styling. Must be imported separately.

This code sets up a basic React component displaying a button with a clickable tooltip using `react-tippy`. It demonstrates importing the component, its CSS, and configuring various tooltip props.

import React from 'react'; import { Tooltip } from 'react-tippy'; import 'react-tippy/dist/tippy.css'; const App = () => ( <div> <h1>React Tippy Demo</h1> <Tooltip title="Welcome to React with Tippy!" position="bottom" trigger="click" animation="fade" duration={200} arrow={true} > <button style={{ padding: '10px 20px', fontSize: '16px' }}> Click Me for a Tooltip </button> </Tooltip> <p style={{ marginTop: '50px' }}> This button demonstrates a basic clickable tooltip using react-tippy. </p> </div> ); export default App;

Debug

Known issues

gotchaFailing to import the 'react-tippy/dist/tippy.css' stylesheet will result in unstyled tooltips that lack basic visual presentation and positioning.

fix

Ensure `import 'react-tippy/dist/tippy.css';` is included in your application's entry point or relevant component file.

affects: >=1.0.0

breakingTypeScript support was added in `v1.3.0`. Projects upgrading from versions prior to `1.3.0` might encounter type errors if they were previously relying on custom type declarations or implicit `any` types. Ensure your `@types/react-tippy` (if used) matches the library version.

fix

Update to `react-tippy@^1.3.0` and ensure your project's TypeScript configuration is set up correctly to consume the shipped types. Review any custom type definitions you might have had.

affects: <1.3.0

gotchaWhen using `interactive={true}` for rich tooltip content, ensure `interactiveBorder` is configured appropriately (especially with `mouseenter` triggers) to prevent the tooltip from closing prematurely when moving the mouse off the trigger but onto the tooltip itself.

fix

Set `interactiveBorder` to a suitable pixel value (e.g., `interactiveBorder={10}`) to create a buffer zone around the interactive tooltip.

affects: >=1.0.0

gotchaThe `arrow` prop, when set to `true`, will disable the `animateFill` animation. If both are enabled, `animateFill` will not be applied.

fix

Choose between having an arrow (`arrow={true}`) or the fill animation (`animateFill={true}`). They are mutually exclusive.

affects: >=1.0.0

gotchaManually controlling the tooltip's visibility with `open` and `onRequestClose` props can conflict with automatic `trigger` events (e.g., `mouseenter`, `click`) if not managed carefully. These props are intended for fully programmatic control.

fix

When using `open` and `onRequestClose`, set `trigger='manual'` to prevent automatic behavior from interfering. Ensure your state updates correctly handle both showing and hiding the tooltip via these props.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'react-tippy/dist/tippy.css'

The CSS file for react-tippy is missing or cannot be resolved by your build system.

fix

Ensure you have `import 'react-tippy/dist/tippy.css';` in your code. If using Webpack, ensure you have a CSS loader configured (e.g., `style-loader` and `css-loader`).

Tooltip appears but is unstyled or positioned incorrectly.

The necessary CSS stylesheet has not been loaded, or there's a conflict with other styles.

fix

Add `import 'react-tippy/dist/tippy.css';` to your application. Check browser developer tools for any CSS errors or overridden styles.

TypeScript error: Property 'title' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tooltip> & Readonly<TooltipProps> & Readonly<{ children?: ReactNode; }>'.

Your project's `react-tippy` types are outdated, or you are using an older version of the library (pre-1.3.0) that did not ship with TypeScript definitions.

fix

Upgrade `react-tippy` to version `1.3.0` or higher (`yarn upgrade react-tippy` or `npm update react-tippy`). Ensure your `tsconfig.json` includes type definitions if you are not using an auto-configured setup.

Tooltip closes immediately when I try to interact with its content (e.g., click a button inside).

The tooltip is not configured as interactive, or `interactiveBorder` is too small, causing it to hide when the mouse leaves the trigger element.

fix

Set `interactive={true}` on your `<Tooltip>` component. If using `mouseenter` trigger, also consider increasing `interactiveBorder` (e.g., `interactiveBorder={10}`) to create a larger safe zone.

Upgrade

Version history

1.4.0latest on npm

Audit

Dependencies

tippy.jsrequiredProvides the core tooltip logic and functionality.

popper.jsrequiredPowers the tooltip's precise positioning engine.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/tvkhoa/react-tippy ↗

packagehttps://www.npmjs.com/package/react-tippy ↗