kitzo

React utilities library

npm GitHub

Tooltip

A flexible tooltip component for React applications.

Configuration

Position

Offset: 8px

Smart Hover

Hide on Touch

Dark Mode

Is Hidden

Animation

Start duration

End duration

Start delay

End delay

Live Demo

Tooltip.tsx

import { Tooltip } from 'kitzo';
    
<Tooltip
  content="Tooltip content"
  position="top"
  offset={8}
  smartHover={true}
  hideOnTouch={true}
  isDark={false}
  isHidden={false}
  animation={{
    startDuration: 110,
    endDuration: 110,
    startDelay: 0,
    endDelay: 0,
  }}
>
  <button>Hover me</button>
</Tooltip>

All Positions

Tooltip Props Reference

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	The element that triggers the tooltip
`content`	`ReactNode`	`—`	Tooltip content
`position`	`top-starttoptop-endright-startrightright-endbottom-startbottombottom-endleft-startleftleft-end`	`'top'`	Preferred tooltip placement
`offset`	`number`	`8`	Distance (px) between tooltip and trigger
`smartHover`	`boolean`	`false`	Keeps tooltip visible when hovering tooltip content
`hideOnTouch`	`boolean`	`true`	Hides tooltip on touch devices
`isDark`	`boolean`	`false`	Enables dark theme styles
`isHidden`	`boolean`	`false`	Forcefully hides the tooltip
`animation`	`TooltipAnimation`	`—`	Controls enter and exit animation timing

Animation Props Reference

Prop	Type	Default	Description
`startDuration`	`number`	`110`	Enter animation duration (ms)
`endDuration`	`number`	`110`	Exit animation duration (ms)
`startDelay`	`number`	`0`	Delay before showing tooltip
`endDelay`	`number`	`0`	Delay before hiding tooltip