Introduction

Tooltip that always stays on top of the screen was created using the React portal feature.

Install

# npm
npm i -D tata-react-tooltip
 
# yarn
yarn add -D tata-react-tooltip
 
# pnpm
pnpm add -D tata-react-tooltip

Usage

import { Tooltip } from 'tata-react-tooltip';
import { useRef } from 'react';
 
const ref = useRef<HTMLDivElement>(null);

Default

<Tooltip
  direction="right"
  parentRef={ref}
  message="hello tooltip!"
>
  <div ref={ref} className="hello">
    Hello Tooltip!
  </div>
</Tooltip>

Dialog

<Tooltip
  dialog
  direction="right"
  parentRef={ref}
  message="hello tooltip!"
>
  <div ref={ref} className="hello">
    Hello Tooltip!
  </div>
</Tooltip>

Custom Style

<Tooltip
  direction="right"
  parentRef={ref}
  message="hello tooltip!"
  bgColor='#9667E9'
  tailColor='#9667E9'
  tailBorderColor='#9667E9'
  customStyle={{ fontSize: '0.9rem', fontWeight: '600' }}
>
  <div ref={ref} className="hello">
    Hello Tooltip!
  </div>
</Tooltip>

API

*: required

Property	Description	Type	Default
*parentRef	Parent element's ref	`RefObject<any>`	-
message	Tooltip message	`string`	-
direction	Tooltip's relative placement to the parent	`tl` ￨ `top` ￨ `tr` ￨ `rt` ￨ `right` ￨ `rb` ￨ `bl` ￨ `bottom` ￨ `br` ￨ `lt` ￨ `left` ￨ `lb`	`top`
customStyle	Custom CSS styles for the tooltip	`CSSProperties`	-
leaveDelay	Delay before tooltip disappears (milliseconds)	`number`	-
enterDelay	Delay before tooltip appears (milliseconds)	`number`	-
color	Tooltip text color	`string`	-
bgColor	Tooltip background color	`string`	`#333`
tailColor	Tooltip tail color	`string`	`#333`
tailBorderColor	Tooltip tail border color	`string`	`#333`
hideTail	Hide tooltip tail	`boolean`	`false`
dialog	Display tooltip as dialog box	`boolean`	`false`
dialogIcon	Icon for dialog tooltip	`ReactNode`	`<WarnIcon />`
dialogBtnText	Button text for dialog tooltip	`string`	`YES`
customTooltip	Custom component to replace default tooltip	`ReactNode`	-

Examples