Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers. Perfect for providing contextual help and additional information.

Import

import { TooltipProvider, Tooltip } from "@sparrowengg/twigs-react";

Usage

const TooltipExample = () => {
  return (
    <TooltipProvider delayDuration={0}>
      <Tooltip content="This is a tooltip">
        <Button>Hover me</Button>
      </Tooltip>
    </TooltipProvider>
  );
};

Props

TooltipProvider

Prop	Type	Default
`delayDuration?`	`number`	`700`
`skipDelayDuration?`	`number`	`300`
`disableHoverableContent?`	`boolean`	-
`css?`	`object`	-

Prop	Type	Default
`content?`	`string \| ReactNode`	-
`side?`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
`align?`	`'start' \| 'center' \| 'end'`	`'center'`
`size?`	`'sm' \| 'md' \| 'lg'`	`'sm'`
`open?`	`boolean`	-
`defaultOpen?`	`boolean`	-
`onOpenChange?`	`(open: boolean) => void`	-
`delayDuration?`	`number`	-
`disableHoverableContent?`	`boolean`	-
`sideOffset?`	`number`	`0`
`alignOffset?`	`number`	`0`
`avoidCollisions?`	`boolean`	`true`
`collisionBoundary?`	`Element \| null \| Array<Element \| null>`	`[]`
`collisionPadding?`	`number \| Partial<Record<Side, number>>`	`0`
`arrowPadding?`	`number`	`0`
`sticky?`	`'partial' \| 'always'`	`'partial'`
`hideWhenDetached?`	`boolean`	`false`
`css?`	`object`	-

Data Attributes

These props are used for the conditional rendering of the components

Prop	Type	Default
`[data-state]?`	`'closed' \| 'delayed-open' \| 'instant-open'`	-
`[data-side]?`	`'top' \| 'bottom' \| 'left' \| 'right'`	-
`[data-align]?`	`'start' \| 'center' \| 'end'`	-