react-autotip

A handful of simple, auto-positioning tooltips (compatible only with React 16+)

npm i react-autotip

TooltipPortalProvider

import { TooltipPortalProvider } from 'react-autotip'
 
ReactDOM.render(
  <TooltipPortalProvider>
    <App />
  </TooltipPortalProvider>,
  document.getElementById('app')
)

Props

name	default	description
style	{}	Pass styling to the portal DOM element

Tooltip

import Tooltip from 'react-autotip'
 
const MyComponent = () => (
  <Tooltip type="info" text="I am tooltip.">
    <div>
      Hover over me to to reveal tooltip.
    </div>
  </Tooltip>
)

Automatic Positioning

Wrap any element with a Tooltip and it will automatically position itself to either the top, right, bottom, or left based on where in the viewport its child element is rendered.

Type (prop)

name	default	description
info	✘	A standard tooltip with a small caret
dialog		A caret-less tooltip with a white background

Other props

name	default	description
text	""	The text to render inside the tooltip
style	{}	Pass any positioning style, etc here
tooltipStyles	{}	Change aspects of the tooltip's style
delay	0ms	Delay before tooltip appears (in milliseconds)
toggleOnClick	false	Tooltip appears only after clicking on target element
motionConfig	{stiffness: 210: damping: 20}	Choose your own params here
padding	16px	Minimum padding between edge of viewport and tooltip
offset	8px	Offset between the tooltip and the tooltip's child
caretSize	5px	Size of the tooltip's caret