tooltip

React tooltip component that follow mouse cursor

Nov 17, 2019
React tooltip component that follow mouse cursor

react-sticky-mouse-tooltip

React tooltip component that follow mouse cursor. You can pass as children any HTML element or other React component.

react-sticky-mouse-tooltip

Installation

npm install react-sticky-mouse-tooltip --save

or

yarn add react-sticky-mouse-tooltip

Example

import React from 'react'; import MouseTooltip from 'react-sticky-mouse-tooltip'; class Preview extends React.Component { state = { isMouseTooltipVisible: false, }; toggleMouseTooltip = () => { this.setState(prevState => ({ isMouseTooltipVisible: !prevState.isMouseTooltipVisible })); }; render() { return ( <div> <button onClick={this.toggleMouseTooltip} style={buttonStyle}> Toggle mouse tooltip </button> <MouseTooltip visible={this.state.isMouseTooltipVisible} offsetX={15} offsetY={10} > <span>Follow the cursor!</span> </MouseTooltip> </div> ); } }

Attributes

AttributeDescriptionTypeRequiredDefault value
visibleVisibility of component.booleanNotrue
offsetXOffset along X axis.numberNo0
offsetYOffset along Y axis.numberNo0
classNameTooltip div class name.stringNo-
styleStyles properties of tooltip div.objectNo-

GitHub

Recommended