Tooltip

Wrap one focusable element, such as Button or a link. Hover over it or focus it with Tab to reveal the description; Escape dismisses it without moving focus. The tooltip stays open while the pointer is over its text. Existing aria-describedby references, child event handlers, and refs are preserved. Custom trigger components must forward aria-describedby to their focusable DOM element.

Import from the client entry point. A Server Component can render Tooltip with its content and children; no client wrapper is needed unless you add your own event handlers. The tooltip supplies a description, so icon-only triggers still need an accessible name such as aria-label. Avoid disabled triggers because they cannot receive keyboard focus.

Use short text, not buttons or links inside the tooltip. Keep essential instructions visible on the page: hover tooltips are not a reliable way to deliver information on touch screens. Use Modal for interactive content.

Choose top, right, bottom, or left with side. Positioning uses CSS relative to the trigger, without automatic edge detection or a portal. Allow space on the chosen side and avoid ancestors with overflow: hidden or overflow: auto when they would clip the tooltip.

Customize .fui-tooltip-content in your theme file, or set --fui-tooltip-background and --fui-tooltip-foreground. They default to the theme foreground and background colors. className and style apply to the wrapper.