rc-tooltip
React Tooltip
Screenshot
Browsers support
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 Opera |
|---|---|---|---|---|
| IE 8 + |
Firefox 31.0+ |
Chrome 31.0+ |
Safari 7.0+ |
Opera 30.0+ |
Install
Usage
var Tooltip = require('rc-tooltip');
var React = require('react');
var ReactDOM = require('react-dom');
// By default, the tooltip has no style.
// Consider importing the stylesheet it comes with:
// 'rc-tooltip/assets/bootstrap_white.css'
ReactDOM.render(
<Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
<a href="#">hover</a>
</Tooltip>,
container
);
Examples
npm start and then go to http://localhost:8007/examples
Online examples: https://react-component.github.io/tooltip/examples/
API
Props
| name | type | default | description |
|---|---|---|---|
| overlayClassName | string | additional className added to popup overlay | |
| trigger | string | string[] | ['hover'] | which actions cause tooltip shown. enum of 'hover','click','focus' |
| mouseEnterDelay | number | 0 | delay time to show when mouse enter.unit: s. |
| mouseLeaveDelay | number | 0.1 | delay time to hide when mouse leave.unit: s. |
| overlayStyle | Object | additional style of overlay node | |
| prefixCls | String | rc-tooltip | prefix class name |
| transitionName | String|Object | same as https://github.com/react-component/animate | |
| onVisibleChange | Function | call when visible is changed | |
| afterVisibleChange | Function | call after visible is changed | |
| visible | boolean | whether tooltip is visible | |
| defaultVisible | boolean | whether tooltip is visible initially | |
| placement | String | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'rightTop', 'rightBottom', 'leftTop', 'leftBottom'] | |
| align | Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) | value will be merged into placement's config | |
| onPopupAlign | function(popupDomNode, align) | callback when popup node is aligned | |
| overlay | React.Element | () => React.Element | popup content | |
| overlayInnerStyle | Object | set overlay inner style | |
| showArrow | boolean | true | arrow visible |
| arrowContent | React.Node | null | arrow content |
| getTooltipContainer | function | Function returning html node which will act as tooltip container. By default the tooltip attaches to the body. If you want to change the container, simply return a new element. | |
| destroyTooltipOnHide | boolean | { keepParent: boolean } | false | whether destroy tooltip when tooltip is hidden.In general, destroyTooltipOnHide will only remove itself instead of parent container of it.Parent container will be removed include tooltip when keepParent is true |
| id | String | Id which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support. |
Important Note
Tooltip requires a child node that accepts an onMouseEnter, onMouseLeave, onFocus, onClick event. This means the child node must be a built-in component like div or span, or a custom component that passes its props to its built-in component child.
Accessibility
For accessibility purpose you can use the id prop to link your tooltip with another element. For example attaching it to an input element:
<Tooltip
...
id={this.props.name}>
<input type="text"
...
aria-describedby={this.props.name}/>
</Tooltip>
If you do it like this, a screenreader would read the content of your tooltip if you focus the input element.
NOTE: role="tooltip" is also added to expose the purpose of the tooltip element to a screenreader.
Development
npm install
npm start
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
License
rc-tooltip is released under the MIT license.
341 Dec 14, 2022
31 Oct 26, 2022
248 Dec 26, 2022
5 Oct 27, 2022
3k Dec 27, 2022
10.1k Jan 3, 2023
19.4k Jan 4, 2023
1k Jan 4, 2023
743 Jan 9, 2023
685 Jan 1, 2023
2.3k Dec 29, 2022
525 Dec 16, 2022
5.6k Jan 8, 2023
1.6k Jan 4, 2023
1.4k Nov 9, 2022
1.4k Jan 4, 2023
1.2k Dec 11, 2022