Tooltips powered by react-popper and react-spring.

Via package managers:

npm install react-popper-spring-tooltip --save
# or
yarn add react-popper-spring-tooltip

Let's start with a simple example:

Wrap your Tooltip component around an on / off Toggle.

<Tooltip trigger="click" placement="bottom" content={<h1>Hi!</h1>}>
  {({ ...bind }) => <button {...bind}>Toggle</button>}
</Tooltip>

Spreading bind will pass you the reference provided by react-popper and EventListeners to open / close the tooltip content.

react-popper-spring-tooltip makes use of a React pattern called "render prop", if you are not familiar with it, please read more on the official React documentation.

In more advanced use cases you may pass your Components via the content prop. You can also pass your own react-spring config to make awesome custom animations. Also note that you can destructure the isOpen prop to add conditions to your Toggle.

<Tooltip
  trigger="click"
  placement="bottom"
  content={<TooltipContent />}
  springConfig={{
    from: {
      scale: 0.8,
      config: { duration: 100 }
    },
    to: {
      scale: 1,
      config: { duration: 50 }
    }
  }}
>
  {({ isOpen, ...bind }) => (
    <button
      {...bind}
      className={`${isOpen ? "opened-button" : "closed-button"}`}
    >
      Toggle
    </button>
  )}
</Tooltip>

(props) => ReactNode | required

The Tooltip component must be wrapped around a function that renders your Toggle.

string | React.Element | required

The content of the Tooltip.

string | required

The Tooltip placement. Valid placements are:

• auto
• top
• bottom
• left
• right

Each placement can have a variation from this list:

• -start
• -end

string | required

The Tooltip trigger action. Valid actions are:

• click
• hover
• context

boolean | defaults to true

Will determine whether or not to close the Tooltip by clicking outside the Trigger.

boolean | defaults to false

Will set the initial open (true) and closed (false) state.

object | defaults to:

{ from: { opacity: 0 }, to: { opacity: 1 }}

Define the CSS using from and to keys.

If you are new to react-spring check out their docs.

This library is built with TypeScript and will automatically generate typing during the Rollup build process in: dist/Tooltip.d.ts

git clone https://github.com/impulse/react-popper-spring-tooltip.git

cd react-popper-spring-tooltip

npm install or yarn

npm run watch or yarn watch