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:

Nice Tooltip Component For React Ok

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

You Might Be Interested In:

Tags:

Add Comment