guyllkegen-react-sticky-mouse-tooltip v1.1.0

react-sticky-mouse-tooltip

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

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';

const Preview:FunctionalComponent = () => {
  
  const [isMouseTooltipVisible, setIsMouseTooltipVisible] = useState<boolean>(false)

  const toggleMouseTooltip = () => {
    setIsMouseTooltipVisible(!isMouseTooltipVisible)
  };

  return (
    <div>
      <button onClick={toggleMouseTooltip} style={buttonStyle}>
        Toggle mouse tooltip
      </button>
      <MouseTooltip
        visible={isMouseTooltipVisible}
        offsetX={15}
        offsetY={10}
      >
        <span>Follow the cursor!</span>
      </MouseTooltip>
    </div>
  );
}

Attributes

License

MIT