A handful of simple, auto-positioning tooltips (compatible only with React 16+)
npm i react-autotip
import { TooltipPortalProvider } from 'react-autotip'
ReactDOM.render(
<TooltipPortalProvider>
<App />
</TooltipPortalProvider>,
document.getElementById('app')
)
name | default | description |
---|---|---|
style | {} | Pass styling to the portal DOM element |
import Tooltip from 'react-autotip'
const MyComponent = () => (
<Tooltip type="info" text="I am tooltip.">
<div>
Hover over me to to reveal tooltip.
</div>
</Tooltip>
)
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.
name | default | description |
---|---|---|
info | ✘ | A standard tooltip with a small caret |
dialog | A caret-less tooltip with a white background |
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 |