React Ok Tooltip is a simple and easy to use tooltip component for React.
npm install @deepdub/react-ok-tooltipReact Ok Tooltip is a simple and easy to use tooltip component for React.

Inside App.tsx:
``tsx
import { OkTooltip } from '@deepdub/react-ok-tooltip';
import '@deepdub/react-ok-tooltip/dist/tooltip.css';
function App() {
return (
<>
{/ insert app here... /}
>
);
}
`
Then, inside Component.tsx:
`tsx
import { tooltip } from '@deepdub/react-ok-tooltip';
function Component() {
return (
);
}
`
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.string
- maxWidth: - A string, passed to the tooltip's style.maxWidth.string
- fontWeight: - A string, passed to the tooltip's style.fontWeight.string
- fontSize: - A string, passed to the tooltip's style.fontSize.string
- textAlign: - A string, passed to the tooltip's style.textAlign.string
- lineHeight: - A string, passed to the tooltip's style.lineHeight.
All are optional.
Customize the tooltip by passing any of these to :
- arrowSize: number - The size of the arrow.string
- backgroundColor: - The background color of the tooltip.string
- borderColor: - The border color of the tooltip.number
- delay: - Tooltip delay in milliseconds (default: 1000).string
- className: - Will be passed on the to tooltip itself.string
- arrowClassName: - Will be passed on the to tooltip itself.
All are optional.
React Ok Tooltip also supports a concept we've called "tooltip group".
A tooltip group lets you anchor multiple tooltips to a single element (as shown in the GIF above, when the cursor hovers the middle section).
`tsx
import { tooltip } from '@deepdub/react-ok-tooltip';
function Component() {
return (