Nice Tooltip Component For React – Ok Tooltip

A simple and easy-to-customize tooltip component for React.

How to use it:

1. Install and import the Ok Tooltip component.

# NPM
$ npm i @deepdub/react-ok-tooltip

import { OkTooltip } from '@deepdub/react-ok-tooltip';
// stylesheet
import '@deepdub/react-ok-tooltip/dist/tooltip.css';

2. Basic usage:

// App.tsx
function App() {
  return (
    <>
      <OkTooltip />
    </>
  );
}

// Component.tsx
import { tooltip } from '@deepdub/react-ok-tooltip';
function Component() {
  return (
    <button ref={tooltip('I am a tooltip!')}>Hover me!</button>
  );
}

3. Tooltip group is supported as well.

function Component() {
  return (
    <div ref={tooltipGroup()}>
      <button ref={tooltip('Tooltip 1')}>Hover Me</button>
      <button ref={tooltip('Tooltip 2')}>Hover Me</button>
      <button ref={tooltip('Tooltip 3')}>Hover Me</button>
    </div>
  );
}

4. Available tooltip props.

• arrowSize: The size of the arrow.
• backgroundColor: The background color of the tooltip.
• borderColor: The border color of the tooltip.
• delay: Tooltip delay in milliseconds (default: 1000).
• className: Will be applied to the tooltip.
• arrowClassName: Will be applied to the arrow.

Preview:

Download Details:

Author: deepdub-ai

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/deepdub-ai/react-ok-tooltip

License: MIT