6.2.0 • Published 21 days ago

rc-tooltip v6.2.0

Weekly downloads
998,965
License
MIT
Repository
github
Last release
21 days ago

rc-tooltip

React Tooltip

NPM version npm download build status Codecov bundle size dumi

Screenshot

Browsers support

IE / EdgeFirefoxChromeSafariOpera
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 start and then go to http://localhost:8000/demo

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

API

Props

nametypedefaultdescription
triggerstring | string[]'hover'which actions cause tooltip shown. enum of 'hover','click','focus'
visiblebooleanfalsewhether tooltip is visible
defaultVisiblebooleanfalsewhether tooltip is visible by default
placementstring'right'tooltip placement. enum of 'top','left','right','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'
motionobjectConfig popup motion. Please ref demo for example
onVisibleChange(visible: boolean) => void;Callback when visible change
afterVisibleChange(visible: boolean) => void;Callback after visible change
overlayReactNode | () => ReactNodetooltip overlay content
overlayStyleobjectstyle of tooltip overlay
overlayClassNamestringclassName of tooltip overlay
prefixClsstring'rc-tooltip'prefix class name of tooltip
mouseEnterDelaynumber0delay time (in second) before tooltip shows when mouse enter
mouseLeaveDelaynumber0.1delay time (in second) before tooltip hides when mouse leave
getTooltipContainer(triggerNode: HTMLElement) => HTMLElement() => document.bodyget container of tooltip, default to body
destroyTooltipOnHidebooleanfalsedestroy tooltip when it is hidden
alignobjectalign config of tooltip. Please ref demo for usage example
showArrowboolean | objectfalsewhether to show arrow of tooltip
zIndexnumberconfig popup tooltip zIndex

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.

@bidalgo/ui-kit@grafana/ui@bodiless/core@titaui/pcharavan-react-componentstest-g-pc@bushuai/uni-testgamiphy-react-appgamiphy-dashboard-reactyzhantd@miot-plugin/rc-slidercomponent-left-menugpn-ui-library@gamiphy/dashboard-coreantd-zpg2_v587_gv587_adminjdc-rc-commontest-rc-commonfind-reactuibot-ui-antddstack-react@dewen_li/componentsdemio-browser-viewer@dewen_li/core@dewen_li/core-ui@dewen_li/layouts@dewen_li/richtextsignplsignpl-testinsync-stageplayermarin-stageplayerybbtestui1@sous-chef/uilb-agora-classroom-edu-sdktdp-uibeeuij-beeui@paraponera/antd@cybertec/react-page-uimdt-designaddnewer-uiantdsebd-testxc-mobilexcmobilesabyss-ui@voplus/antdrc-humanizeingosinvest-react-ui-kitingosinvest-react-ui-kit-test@inv3rse/react-sdk@cliffdotai/atomiccognitiv-ui@cybertec/ory-editor-uianm.pa.search.widgetonlinex-testdqm-plugin@dibanka/demovibo-uixqshoutenn-uiys-tipstaskbox-cici@baolq/antd@gourban/ui-componentsguree-uiantd-without-babelsia-antdmaycur-antdluck-design-testrtu-components-2@everything-registry/sub-chunk-2535dt-libraryrc-slider-with-dotsbun-ui-kitintelligent-design@gedit/uivwebapp-framework@adactiveasia/antd@analytickit/react-rrweb-player@asrat-77/slider-component@assessment-hrplatform/all@asemirsk/components@asemirsk/core@asemirsk/core-ui@asemirsk/layouts@asemirsk/richtext@authing/molecule@authing/molecule2@casstime/bricks@cater2.me/components@compeon-os/components@compeon/componentscliniad@batbayar/superset-plugin-chart-hello-world@bdcloud/airec@cscec/udp-antd-basecolor-statistics@daonomic/uicompellon-rc-slider
6.2.0

21 days ago

6.1.3

3 months ago

6.1.2

5 months ago

6.1.1

6 months ago

6.1.0

6 months ago

5.3.1

1 year ago

5.3.0

1 year ago

6.0.1

1 year ago

6.0.0

1 year ago

5.2.2

2 years ago

5.2.1

2 years ago

5.2.0

2 years ago

5.1.1

3 years ago

5.1.0

3 years ago

5.0.2

3 years ago

4.2.3

4 years ago

5.0.1

4 years ago

5.0.0

4 years ago

4.2.2

4 years ago

4.2.1

4 years ago

4.2.0

4 years ago

4.1.0

4 years ago

4.0.3

4 years ago

4.0.2

4 years ago

4.0.1

4 years ago

4.0.0

4 years ago

4.0.0-alpha.3

4 years ago

4.0.0-alpha.2

4 years ago

4.0.0-alpha.1

4 years ago

4.0.0-alpha.0

4 years ago

3.7.3

6 years ago

3.7.2

6 years ago

3.7.1

6 years ago

3.7.0

6 years ago

3.6.0

6 years ago

3.5.0

7 years ago

3.4.9

7 years ago

3.4.8

7 years ago

3.4.7

7 years ago

3.4.6

7 years ago

3.4.5

7 years ago

3.4.3

7 years ago

3.4.2

8 years ago

3.4.1

8 years ago

3.4.0

8 years ago

3.3.5

8 years ago

3.3.4

8 years ago

3.3.3

8 years ago

3.3.2

8 years ago

3.3.1

8 years ago

3.3.0

8 years ago

3.2.0

8 years ago

3.1.1

8 years ago

3.1.0

8 years ago

3.0.4

8 years ago

3.0.3

8 years ago

3.0.2

8 years ago

3.0.1

8 years ago

3.0.0

8 years ago

2.10.1

8 years ago

2.10.0

8 years ago

2.9.0

8 years ago

2.8.0

9 years ago

2.7.1

9 years ago

2.7.0

9 years ago

2.6.5

9 years ago

2.6.4

9 years ago

2.6.3

9 years ago

2.6.2

9 years ago

2.6.1

9 years ago

2.6.0

9 years ago

2.5.1

9 years ago

2.5.0

9 years ago

2.4.1

9 years ago

2.4.0

9 years ago

2.3.0

9 years ago

2.2.4

9 years ago

2.2.3

9 years ago

2.2.2

9 years ago

2.2.1

9 years ago

2.2.0

9 years ago

2.1.2

9 years ago

2.1.1

9 years ago

2.1.0

9 years ago

2.0.4

9 years ago

2.0.3

9 years ago

2.0.2

9 years ago

2.0.1

9 years ago

2.0.0

9 years ago

1.2.0

9 years ago

1.1.2

9 years ago

1.1.1

9 years ago

1.1.0

9 years ago

1.0.0

9 years ago