HelpTooltip

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 { HelpTooltip } from "rfui-package";

#Basic

<HelpTooltip content="Example content" />

#Direction

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

#Size

<Stack className="items-center gap-8 p-8">
  <HelpTooltip size="sm" content="Example content" />
  <HelpTooltip size="md" content="Example content" />
  <HelpTooltip 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 HelpTooltip, you could pass anything you normally would pass to <span> because the return value looks something like this:
<span className={containerClass} {...restWithoutClass}>
  {children}
</span>