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). |
isPointingDisabled |
boolean |
false |
When true, removes the open delay and the safePolygon bridge, so the pointer cannot travel into the tooltip. |
className |
string |
— | Extra class on the floating element (added to uxf-tooltip). |
style |
CSSProperties |
— | Extra styles merged onto the floating element. |
safePolygon lets the pointer move from the reference into the tooltip without closing it. Set isPointingDisabled to turn this off (and drop the delay).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.