A floating label shown on hover/focus of a reference element, positioned with @floating-ui/react and rendered in a portal with a pointing arrow.
Use Tooltip to reveal a short, non-interactive hint when the user hovers or focuses a control. It opens on hover (after a 200 ms delay) and on keyboard focus, and closes on blur, Escape, or pointer-out.
Popover.content is falsy, the tooltip renders children unchanged (no wrapper, no floating element).There is no @uxf/form twin.
import { Tooltip } from "@uxf/ui/tooltip";
<Tooltip content="My tooltip content" placement="top">
<button type="button">Hover me</button>
</Tooltip>;
children must be a single element that accepts a ref and DOM props — it is cloned and used as the reference element.
TooltipProps extends TooltipOptions (minus arrowRef).
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactElement | — | Required. Reference element. Cloned with the reference props; must forward a ref. |
content | ReactNode | — | Required. Tooltip content. If falsy, children is returned as-is. |
placement | Placement | "bottom" (floating-ui default) | Preferred side; flip moves it when there is no room. |
offset | number | 16 | Distance in px between reference and tooltip. |
shiftPadding | number | 8 | Padding for the shift middleware (viewport edge gap). |
isInteractive | boolean | true | When false, drops the safePolygon bridge and pointer events: the tooltip closes on pointer-out and never blocks what it covers. |
openDelay | number | 200 | Hover delay in ms before opening. Focus opens at once. |
isPointingDisabled | boolean | false | Deprecated. Same as isInteractive={false} with openDelay={0}. |
className | string | — | Extra class on the floating element (added to uxf-tooltip). |
style | CSSProperties | — | Extra styles merged onto the floating element. |
openDelay) and focus. Closes on Escape, outside interaction, or blur.safePolygon lets the pointer move from the reference into the tooltip without closing it, as WCAG 2.1 SC 1.4.13 asks for hover content.isInteractive={false} makes the tooltip a pure overlay (uxf-tooltip--non-interactive, pointer-events: none). It closes as soon as the pointer leaves the reference, and a click on what it covers goes through. Use it where tooltips sit over dense, clickable UI and never hold anything to click or select.useTooltipThe useTooltip hook and its TooltipOptions type are exported for building custom floating elements. It wires up useFloating with offset/flip/shift/arrow middleware plus hover, focus, dismiss, and role interactions, and requires an arrowRef.
import { useTooltip } from "@uxf/ui/tooltip";
Import the component stylesheet once in your global CSS:
@import url("@uxf/ui/css/tooltip.css");
Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.