React Tooltip

A React tooltip component built using Floating UI primitives.

Motivation

The popular React Tooltip project is no longer under development and has issues with React 18. Using Floating UI to manage the positioning of the popup it is now very simple to build a tooltip.

Update: The React Tooltip project has now been updated to work with React 18.

Installation

There's no package install for this. To use it, copy the Tooltip component into your project and add the following dependencies, and then customise the tooltip as you see fit.

npm install @floating-ui/react-dom-interactions react-merge-refs

Usage

<Tooltip placement='top' content='Hello tooltip'>
  <button>Hover me</button>
</Tooltip>

<Tooltip placement='right' content={<div>I <em>am</em> a div</div>}>
  <button>And me</button>
</Tooltip>

Notes

• No animations is provided, see this example for adding a Framer Motion animation
• The tooltip is highly customisable, see the Floating UI docs for details

Output