Icon Tooltip

An icon button that reveals a tooltip — choose the side and delay.

Example.tsx

import { IconTooltip } from "@/components/better/icon-tooltip"
import { GearIcon } from "@phosphor-icons/react"

export function Example() {
  return (
    <IconTooltip
      icon={<GearIcon className="size-5" />}
      label="Settings"
      side="top"
      delay={0}
      duration={0}
    />
  )
}

Dependencies

motion

Props

Prop	Type	Default	Description
icon*	ReactNode	—
label*	string	—
className	string	—
side	Side	"top"	Which side the tooltip appears on.
delay	number	0	Delay before it appears, in ms.
duration	number	0	Auto-hide after this many ms once shown (0 = stay until mouse leaves).