{"library":"react-popper-tooltip","title":"React Popper Tooltip","description":"react-popper-tooltip is a React library that provides a flexible hook (`usePopperTooltip`) for creating smart, accessible tooltips, popovers, and overlays. It leverages the robust positioning engine of `react-popper` (which in turn uses `popper.js`) under the hood. Currently at version 4.4.2, the library shows an active release cadence with frequent patch and minor updates addressing bugs and adding features like Shadow DOM support and improved hover mechanics. A key differentiator since its v4 release is the exclusive reliance on a hook-based API, moving away from older render prop patterns for a more modern and flexible developer experience. It provides optional default styling but is designed to be highly customizable with any CSS or CSS-in-JS solution.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-popper-tooltip"],"cli":null},"imports":["import { usePopperTooltip } from 'react-popper-tooltip';","import 'react-popper-tooltip/dist/styles.css';","import type { UsePopperTooltipOptions } from 'react-popper-tooltip';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import * as React from 'react';\nimport { render } from 'react-dom';\nimport { usePopperTooltip } from 'react-popper-tooltip';\nimport 'react-popper-tooltip/dist/styles.css';\n\nfunction App() {\n  const {\n    getArrowProps,\n    getTooltipProps,\n    setTooltipRef,\n    setTriggerRef,\n    visible,\n  } = usePopperTooltip();\n\n  return (\n    <div className=\"App\">\n      <button type=\"button\" ref={setTriggerRef}>\n        Trigger\n      </button>\n      {visible && (\n        <div\n          ref={setTooltipRef}\n          {...getTooltipProps({ className: 'tooltip-container' })}\n        >\n          <div {...getArrowProps({ className: 'tooltip-arrow' })} />\n          Tooltip Content\n        </div>\n      )}\n    </div>\n  );\n}\n\nrender(<App />, document.getElementById('root'));","lang":"typescript","description":"Demonstrates the basic usage of the `usePopperTooltip` hook with a simple button trigger and includes the default stylesheet for minimal styling and functionality.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}