# react-tooltip [![Version](http://img.shields.io/npm/v/react-tooltip.svg)](https://www.npmjs.org/package/react-tooltip) ![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![npm download][download-image]][download-url] ![minified](https://badgen.net/bundlephobia/min/react-tooltip) ![minified gzip](https://badgen.net/bundlephobia/minzip/react-tooltip) [download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square [download-url]: https://npmjs.org/package/react-tooltip If you like the project, please give the project a GitHub 🌟 --- Why do we show ads on our docs? - ReactTooltip is an open source project, this is the way we found to be financed by the community. ## Demo [![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/gallant-leftpad-8kvtn7?file=/src/App.js) Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-tooltip/). Documentation for V5 - [ReactTooltip](https://react-tooltip.com/docs/getting-started). --- ## Installation ```sh npm install react-tooltip ``` or ```sh yarn add react-tooltip ``` ## Sponsors ### Gold Sponsors 🌟

React Tooltip is proud to be sponsored by [Frigade](https://frigade.com/?source=react-tooltip), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc. #### Silver Sponsors ✪

## Powered by

## Usage 1 . Import the CSS file to set default styling. > [!WARNING]\ > If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show! ```js import 'react-tooltip/dist/react-tooltip.css' ``` This needs to be done only once and only if you are using a version before than `5.13.0`. We suggest you do it on your `src/index.js` or equivalent file. 2 . Import `react-tooltip` after installation. ```js import { Tooltip } from 'react-tooltip' ``` or if you want to still use the name ReactTooltip as V4: ```js import { Tooltip as ReactTooltip } from 'react-tooltip' ``` 3 . Add `data-tooltip-id=""` and `data-tooltip-content=""` to your element. > `data-tooltip-id` is the equivalent of V4's `data-for`. ```jsx ◕‿‿◕ ``` 4 . Include the `` element. > [!NOTE]\ > Don't forget to set the id, it won't work without it! ```jsx

	Stars	Issues	Version	Updated	Created
popper.js	28,502	15	1.16.1	4 years ago	8 years ago
react-popover	598	98	0.5.10	6 years ago	9 years ago
react-popper			2.3.0	2 years ago	8 years ago
react-popper-tooltip			4.4.2	2 years ago	6 years ago
react-tooltip	3,442	15	5.26.3	2 months ago	9 years ago

popper.js vs react-popover vs react-popper vs react-popper-tooltip vs react-tooltip

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past