@deepdub/react-ok-tooltip

React Ok Tooltip

React Ok Tooltip is a simple and easy to use tooltip component for React.

Usage

Inside App.tsx:

import { Tooltip } from '@deepdub/react-ok-tooltip';

// ...

function App() {
  return (
    <>
      {/* insert app here... */}
      <Tooltip arrowSize={5} />
    </>
  );
}

Then, inside Component.tsx:

import { tooltip } from '@deepdub/react-ok-tooltip';

// ...

function Component() {
  return (
    <button {...tooltip('I am a tooltip!')} />
  );
}

Options

Tooltip Options

tooltip() method accepts two parameters: title (a string) and options (an object of shape TooltipProps).

TooltipProps may include any of the follwing:

• subtitle: string - A subtitle that will appear, well, below the title.
• maxWidth: string - A string, passed to the tooltip's style.maxWidth.

All are optional.

Global Tooltip Options

Customize the tooltip by passing any of these to <Tooltip>:

• arrowSize: number - The size of the arrow.
• backgroundColor: string - The background color of the tooltip.
• borderColor: string - The border color of the tooltip.

All are optional.

Tooltip Group

React Ok Tooltip also supports a concept we've called "tooltip group".

A tooltip group is a group of tooltips that are displayed at the same location.

Usage

import { tooltip } from '@deepdub/react-ok-tooltip';

// ...

function Component() {
  return (
    <div className="button-group" >
      <button {...tooltip('Cut Selection', { groupId: "clipboard" })}>Cut</button>
      <button {...tooltip('Copy Selection', { groupId: "clipboard" })}>Copy</button>
      <button {...tooltip('Paste', { groupId: "clipboard" })}>Paste</button>
    </div>
  );
}