React Tippy

A lightweight tooltip for React. Demo at Demo page here...

Based on tippy.js and powered by Popper.js

Why you should use it?

It is designed to work friendly with React, it provides <Tooltip> element or a higher-order component.

It uses React DOM to render tooltip content. Therefore, you can fully use it in your React project without doubt.

It is an enhancement of Tippy.js for using in React.

Getting Started

yarn add react-tippy

How to use

First, you need import css

import 'react-tippy/dist/tippy.css'

There are 2 ways for you to use react Tippy

Tooltip Component

import {
  Tooltip,
} from 'react-tippy';


<Tooltip
  // options
  title="Welcome to React"
  position="bottom"
  trigger="click"
>
  <p>
    Click here to show popup
  </p>
</Tooltip>

High Order Component

withTooltip(Component, options)

import {
  withTooltip,
} from 'react-tippy';


const Header = () => (
  <h2>Header here</h2>
);

const HeaderWithTooltip = withTooltip(Header, {
  title: 'Welcome to React with tooltip',
});

Props

Custom tooltip content

You need to pass element to option html

import {
  Tooltip,
} from 'react-tippy';


<Tooltip
  html={(
    <div>
      <strong>
        Hello
      </strong>
    </div>
  )}
>
  // ...
</Tooltip>

Interactive html tooltip

You can use interactive prop and html for your interactive tooltip

  <Tooltip
    trigger="click"
    interactive
    html={(
      <div>
        <p>{tooltipContent}</p>
        <input
          type="text"
          value={tooltipContent}
          onChange={(e) => {setTooltipContent(e.target.value)}}
        />
      </div>
    )}
  >
    ...
  </Tooltip>

Show/hide your tooltip manually

<Tooltip
  title={tooltipContent}
  open={open}
  onRequestClose={() => {console.log('call'); setIsOpen(false)}}
>
  <span className="App-intro" onClick={() => { setIsOpen(true) }}>
    This will show {tooltipContent}
  </span>
</Tooltip>

Browser support

Tippy gracefully degrades on older browsers (and with JavaScript disabled) by using the browser's default title tooltip.

If you want to support older browsers, please add polyfill by yourself.

Supported browsers

Browsers which support requestAnimationFrame. See caniuse. If your audience has low Opera Mini usage (common in western countries), then support should be >96%.

Touch devices

Tippy works on touch devices almost the same as on desktop/mouse devices. However on iOS devices, in order for tooltips to close when tapping anywhere on the body and to trigger hover events on non-clickable elements, a .tippy-touch { cursor: pointer !important; } class is added to the body.

Accessibility

Tooltips have ARIA labelling to ensure accessibility.

Troubleshoot

I cannot connect html props with redux connect. Or can I use context in tooltip content?

react-tippy provides useContext for Tooltip component. It can allow you to use context in tooltip content. Therefore, you can totally connect it to redux.

<Tooltip
  trigger="click"
  useContext
  html={(
    <TooltipContent />
  )}
>
  Click here
</Tooltip>

Could I change tooltip style (width, height, ...)?

You can change css to have your tooltip width. If you use html props, you can do like this:

html={(
  <div style={{ width: 400 }}>
    // content here
  </div>
)}

License

MIT. Also check Popper.js' license.