Tippy.js for React

The complete tooltip and popover solution for React apps

--- [Tippy.js](https://github.com/atomiks/tippyjs/) is a highly customizable tooltip and popover library powered by Popper.js. This is a lightweight wrapper that lets you use it declaratively in React. ## 💎 Examples ### Tooltips - [Bootstrap 4 Style](https://codesandbox.io/s/mm61w3rrqx) - [Material Style](https://codesandbox.io/s/0y6pj161wp) ### Popovers - [Accessible Emoji Reaction Picker](https://codesandbox.io/s/1vzvoo9mwl) ## 🚀 Installation ```bash # npm npm i @tippy.js/react # Yarn yarn add @tippy.js/react ``` CDN: https://unpkg.com/@tippy.js/react Requires React 16.8+ ## 🖲 Usage Import the `Tippy` component and the core CSS. Wrap the `` component around the element, supplying the tooltip's content as the `content` prop. It can take a string or a tree of React elements. ```jsx import React from 'react'; import Tippy from '@tippy.js/react'; import 'tippy.js/dist/tippy.css'; const StringContent = () => ( ); const JSXContent = () => ( Tooltip}> ); ``` ### Component children If you want to use a component element as a child, ensure you forward the ref to the DOM node: ```jsx import React, {forwardRef} from 'react'; function ThisWontWork() { return ; } const ThisWillWork = forwardRef((props, ref) => { return ; }); function App() { return ( ); } ``` `styled-components` v4 does this for you automatically, so it should be seamless when using the `styled` constructor. If you're using a library that doesn't `forwardRef` for you, and doesn't give access to the ref via `innerRef` or similar, you can use a wrapper `` element as a workaround. ```jsx Content ``` ## 🧬 Props All of the native Tippy.js props can be passed to the component. Visit [All Props](https://atomiks.github.io/tippyjs/all-props/) to view the complete table. ```jsx ``` In addition, there are 3 more props added specifically for the React component. ### `className?: string` A React alternative to the `theme` prop. The className gets added to the tooltip element's class list as expected, without adding `-theme` as a suffix. ```jsx

	Stars	Issues	Version	Updated	Created
@tippy.js/react	1,791	59	3.1.1	5 years ago	6 years ago
rc-tooltip	924	70	6.2.0	6 months ago	9 years ago
react-popper	2,502	39	2.3.0	2 years ago	8 years ago
react-tooltip	3,577	22	5.28.0	a month ago	9 years ago

@tippy.js/react vs rc-tooltip vs react-popper vs react-tooltip

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past