rc-simple-tooltip
TypeScript icon, indicating that this package has built-in type declarations

1.3.20 • Public • Published

Simple react tooltip component

License npm Build Status

Demo

Demo

Installation

Install package with npm:

npm i rc-simple-tooltip

Install package with yarn:

yarn add rc-simple-tooltip

Basic Usage

Import Tooltip component:

import Tooltip from 'rc-simple-tooltip';

Wrap your component with Tooltip:

<Tooltip trigger="hover" content="Tooltip content">
  <button>Complete action</button>
</Tooltip>

Tooltip works with any component that supports refs. For custom functional components you need to forward ref:

const Button = React.forwardRef(({children, ...props}, ref) =>
  <button {...props} ref={ref}>{children}</button>
);
<Tooltip trigger="hover" content="Tooltip content">
  <Button>Complete action</Button>
</Tooltip>

Tooltip can be used without any children:

<Tooltip top content="Tooltip content" />

Additionally import styles.css to apply default styling:

import 'rc-simple-tooltip/dist/styles.css';

Props

Name Type Default Description
active Boolean true Show tooltip
timeout Int 0 Time delay before hiding tooltip in hover mode
content Node null Tooltip content
position 'left'|'right'|'top'|'bottom' null Tooltip position
trigger 'click'|'focus'|'hover' null Tooltip activation trigger
className String null className value
styles Object null styles value

Running locally

With yarn:

yarn start

With npm:

npm start

Package Sidebar

Install

npm i rc-simple-tooltip

Weekly Downloads

27

Version

1.3.20

License

MIT

Unpacked Size

28.6 kB

Total Files

21

Last publish

Collaborators

  • redmundas