react-simpler-tooltip
Lightweight and easy-to-use react component to display a tooltip over a given element when passing mouse on it
This module is very similar to react-simple-tooltip, but fixes some minor problems with the package:
- Tooltip never overflows outside the screen, its edges are capped if content is too long
- No word-break by default, which is a a more natural behaviour in my opinion
- Add
auto
placement option, which allows to not worry about where to draw the tooltip - Tooltip is rendered in the document body instead of just outside the
<div>
(See issue)
Install
npm install react-simpler-tooltip
Usage
import Tooltip from 'react-simpler-tooltip' // ... { return <Tooltip ="I love what you do"> <button>Hey man</button> </Tooltip>}
Result:
Specify placement
<Tooltip content="xxx" placement="top">xxx</Tooltip>
The placement
attribute accepts 5 values: left
, top
, right
, bottom
, and auto
. auto is the default value, it means that the tooltip will be placed automatically in function of where the hovering element is (e.g if the item is at the right of the window, the tooltip will be placed at the left).
Custom style/className for tooltip
You can assign custom style or class to the tooltip with the attributes tooltipStyle
and tooltipClass
:
<Tooltip content="xxx" tooltipStyle={{padding:0}} tooltipClass="tooltip-menu">xxx</Tooltip>
Tooltip events
You can assign events called when tooltip appear and disappear:
<Tooltip content="xxx" onShow={() => alert("Hello!")} onHide={() => alert("Bye")}>xxx</Tooltip>
Contribute
Feel free to contribute for this project. Issues and pull requests are welcomed.
License
This project is licensed under the MIT License - see the License file for details