https://github.com/marlo22/react-sticky-mouse-tooltip
React tooltip component that follow mouse cursor.
https://github.com/marlo22/react-sticky-mouse-tooltip
component cursor fixed follow mouse popover react sticky tooltip
Last synced: 4 months ago
JSON representation
React tooltip component that follow mouse cursor.
- Host: GitHub
- URL: https://github.com/marlo22/react-sticky-mouse-tooltip
- Owner: marlo22
- License: mit
- Created: 2019-03-10T11:04:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T01:31:16.000Z (almost 3 years ago)
- Last Synced: 2025-05-25T04:48:11.237Z (5 months ago)
- Topics: component, cursor, fixed, follow, mouse, popover, react, sticky, tooltip
- Language: JavaScript
- Size: 484 KB
- Stars: 21
- Watchers: 1
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```js
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 (
Toggle mouse tooltip
Follow the cursor!
);
}
}
```
## Attributes
| Attribute | Description | Type | Required | Default value |
| --- | --- | --- | --- | --- |
| visible | Visibility of component. | ```boolean``` | No | ```true``` |
| offsetX | Offset along X axis. | ```number``` | No | ```0``` |
| offsetY | Offset along Y axis. | ```number``` | No | ```0``` |
| className | Tooltip ```div``` class name. | ```string``` | No | - |
| style | Styles properties of tooltip ```div```. | ```object``` | No | - |
## License
MIT