rc-tooltip

2020-02-13

React Tooltip

rc-tooltip


React Tooltip

NPM versionbuild statusTest coveragegemnasium depsnode versionnpm download

Screenshot

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE 8 + ✔Firefox 31.0+ ✔Chrome 31.0+ ✔Safari 7.0+ ✔Opera 30.0+ ✔

Install

rc-tooltip

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 startand then go to http://localhost:8007/examples

Online examples: https://react-component.github.io/tooltip/examples/

API

Props

nametypedefaultdescription
overlayClassNamestringadditional className added to popup overlay
triggerstring[]['hover']which actions cause tooltip shown. enum of 'hover','click','focus'
mouseEnterDelaynumber0delay time to show when mouse enter.unit: s.
mouseLeaveDelaynumber0.1delay time to hide when mouse leave.unit: s.
overlayStyleObjectadditional style of overlay node
prefixClsStringrc-tooltipprefix class name
transitionNameString|Objectsame as https://github.com/react-component/animate
onVisibleChangeFunctioncall when visible is changed
afterVisibleChangeFunctioncall after visible is changed
visiblebooleanwhether tooltip is visible
defaultVisiblebooleanwhether tooltip is visible initially
placementStringone of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']
alignObject: alignConfig of dom-alignvalue will be merged into placement's config
onPopupAlignfunction(popupDomNode, align)callback when popup node is aligned
overlayReact.Element | () => React.Elementpopup content
arrowContentReact.Nodenullarrow content
getTooltipContainerfunctionFunction 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.
destroyTooltipOnHidebooleanfalsewhether destroy tooltip when tooltip is hidden
idStringId which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support.

Note

Tooltiprequires child node accepts onMouseEnter, onMouseLeave, onFocus, onClickevent.

Accessibility

For accessibility purpose you can use the idprop 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-tooltipis released under the MIT license.

HomePage

http://github.com/react-component/tooltip

Repository

https@github.com:react-component/tooltip


上一篇:@ant-design/react-native
下一篇:@types/styled-components
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部