Primitive

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

npx benflux-ui add tooltip

Usage

import {
  TooltipProvider, Tooltip,
  TooltipTrigger, TooltipContent,
} from "@benflux-ui/react"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Helpful tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Props — SimpleTooltip

Prop	Type	Default	Description
content	ReactNode	—	Content shown inside the tooltip
side	"top" \| "right" \| "bottom" \| "left"	"top"	Preferred side to display the tooltip
delayDuration	number	400	Delay in ms before the tooltip appears