InfoTooltip

This is just a thin wrapper over the Tooltip component because it is a common need to use a help icon with a tooltip.

Note: Tooltips are often overused. They are generally useful when the information in the tooltip is supplementary and when it isn't pragmatic to place the info on the screen. Consider Nielsen Norman Group's guidelines before using a tooltip.

Note: To avoid accidental activations of the tooltip, a 400ms delay is used. [source]

Note: Tooltips are meant for small amounts of content. If you have a larger amount of content that you want to display after a user interaction, consider a popover component instead. [source]

Source code
import { InfoTooltip } from "rfui-package";

#Basic

<InfoTooltip content="Example content" />

#Direction

<Stack className="items-center gap-8 p-8">
  <InfoTooltip direction="top" content="Example content" />
  <InfoTooltip direction="right" content="Example content" />
  <InfoTooltip direction="bottom" content="Example content" />
  <InfoTooltip direction="left" content="Example content" />
</Stack>

#Size

<Stack className="items-center gap-8 p-8">
  <InfoTooltip size="sm" content="Example content" />
  <InfoTooltip size="md" content="Example content" />
  <InfoTooltip size="lg" content="Example content" />
</Stack>

#Props

PropRequiredDefaultType and notes
content✔-
string
direction-"right"
"top" | "right" | "bottom" | "left"
size-"md"
"sm" | "md" | "lg"
...rest--
ComponentProps<"span">
See the docs for rest parameters. For InfoTooltip, you could pass anything you normally would pass to <span> because the return value looks something like this:
<span className={containerClass} {...restWithoutClass}>
  {children}
</span>