InfoTooltip

This is just a thin wrapper over the Tooltip component because it is a common need to use an info icon with a tooltip. However, note that it is generally recommended to only use tooltips to provide supplementary rather than essential information to users.
Source code
import { InfoTooltip } from "rfui";

#Basic

<InfoTooltip content="Example content" />

#Direction

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

#Size

<Stack class="items-center gap-8 p-8">
  <InfoTooltip content="Example content" size="sm" />
  <InfoTooltip content="Example content" size="md" />
  <InfoTooltip content="Example content" size="lg" />
</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 class={containerClass} {...restWithoutClass}>
  {children}
</span>