Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ReactTooltip/react-tooltip
React Tooltip Component
https://github.com/ReactTooltip/react-tooltip
javascript react react18 tooltip typescript
Last synced: 13 days ago
JSON representation
React Tooltip Component
- Host: GitHub
- URL: https://github.com/ReactTooltip/react-tooltip
- Owner: ReactTooltip
- License: mit
- Created: 2015-04-07T13:15:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-09-30T21:46:43.000Z (about 1 month ago)
- Last Synced: 2024-10-22T21:50:34.836Z (17 days ago)
- Topics: javascript, react, react18, tooltip, typescript
- Language: TypeScript
- Homepage: https://react-tooltip.com/
- Size: 53.9 MB
- Stars: 3,599
- Watchers: 26
- Forks: 528
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-ccamel - ReactTooltip/react-tooltip - React Tooltip Component (TypeScript)
- best-of-react - GitHub - 1% open · ⏱️ 08.05.2024): (Other Components)
README
# react-tooltip
[](https://www.npmjs.org/package/react-tooltip)
[](https://github.com/prettier/prettier)
[![npm download][download-image]][download-url]
[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
[](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
```
## Troubleshooting
Before trying these, make sure you're running the latest ReactTooltip version with
```sh
npm install react-tooltip@latest
```
or
```sh
yarn add react-tooltip@latest
```
Please check our [troubleshooting section](https://react-tooltip.com/docs/troubleshooting) on our docs.
If you can't find your problem here, make sure there isn't [an open issue](https://github.com/ReactTooltip/react-tooltip/issues) already covering it.
If there isn't, feel free to [submit a new issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).
## Article
[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)
## Maintainers
[danielbarion](https://github.com/danielbarion) Maintainer - Creator of React Tooltip >= V5.
[gabrieljablonski](https://github.com/gabrieljablonski) Maintainer.
[aronhelser](https://github.com/aronhelser) (inactive).
[alexgurr](https://github.com/alexgurr) (inactive).
[pdeszynski](https://github.com/pdeszynski) (inactive).
[roggervalf](https://github.com/roggervalf) (inactive).
[huumanoid](https://github.com/huumanoid) (inactive)
[wwayne](https://github.com/wwayne) (inactive) - Creator of the original React Tooltip (V1.x ~ V4.x.)
We would gladly accept a new maintainer to help out!
## Contributing
We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](CONTRIBUTION.md) doc has some details.
## License
MIT