tooltip

A tooltip component for React apps utilizing the excellent popper.js library

Jul 31, 2018
A tooltip component for React apps utilizing the excellent popper.js library

react-tooltip

A tooltip component for React apps.

View demo Download Source

Installation

npm install --save @cypress/react-tooltip

Usage

import Tooltip from '@cypress/react-tooltip' <Tooltip title="Hello World"> <button>Click me</button> </Tooltip>

The tooltip will automatically appear when mousing over the button and disappear when mousing out from the button.

Options

optiondefaultdescriptionsupported values
titleundefinedRequired. The tooltip contentAnything renderable by React (string, number, element, etc)
placement'top'The placement of the tooltipPlacements supported by popper.js
visibleundefinedWhether to show the tooltip when rendered. This overrides the default showing/hiding on mouse-over/mouse-outtrue or false
className'tooltip'Class applied to the tooltip
wrapperClassName''Class applied to the <span> that wraps the children of <Tooltip>
updateCueundefinedA prop that indicates that the tooltip's position should update. If the size of the tooltip target changes while the tooltip is showing, the tooltip won't know to update its position. Set this to something that's tied to the target's size or just to a new value to trigger an update of the tooltip's position.

GitHub

Recommended