{"library":"react-tippy","title":"React Tippy","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-tippy"],"cli":null},"imports":["import { Tooltip } from 'react-tippy';","import { withTooltip } from 'react-tippy';","import 'react-tippy/dist/tippy.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { Tooltip } from 'react-tippy';\nimport 'react-tippy/dist/tippy.css';\n\nconst App = () => (\n  <div>\n    <h1>React Tippy Demo</h1>\n    <Tooltip\n      title=\"Welcome to React with Tippy!\"\n      position=\"bottom\"\n      trigger=\"click\"\n      animation=\"fade\"\n      duration={200}\n      arrow={true}\n    >\n      <button style={{ padding: '10px 20px', fontSize: '16px' }}>\n        Click Me for a Tooltip\n      </button>\n    </Tooltip>\n    <p style={{ marginTop: '50px' }}>\n      This button demonstrates a basic clickable tooltip using react-tippy.\n    </p>\n  </div>\n);\n\nexport default App;","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}