Tooltip

Warning: 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]

Note: Consider using a dotted underline for your trigger instead of an "i" icon. [source]

Source code
Test
import { Tooltip } from "rfui";

#Basic

Test
<Tooltip content="Example content">Test</Tooltip>

#Direction

TopRightBottomLeft
<Stack class="items-center gap-8 p-8">
  <Tooltip content="Example content" direction="top">Top</Tooltip>
  <Tooltip content="Example content" direction="right">Right</Tooltip>
  <Tooltip content="Example content" direction="bottom">Bottom</Tooltip>
  <Tooltip content="Example content" direction="left">Left</Tooltip>
</Stack>

#Props

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