https://framer.com/m/TooltipX-LJqf.js
TooltipX
TooltipX attaches a short line of text to whatever you put in its trigger slot. The tip itself only appears on hover or keyboard focus, so the specimens below show the triggers — hover one in the canvas or on the published page to see the tip.
Examples
Live specimens for every control the component exposes.
Default
A trigger with a tip attached. Hover it to see the tip — a static render cannot show it.
Position
position places the tip on one of four sides of the trigger. offset sets how far off it sits.
position top
position right
position bottom
position left
Icon
showIcon adds a Phosphor glyph beside the copy; iconPosition puts it before or after.
showIcon false
icon Info · left
icon ArrowRight · right
Shape and delay
radius and the two padding props shape the tip; showArrow toggles the pointer; delayMs decides how long the pointer must rest first.
paddingY 5 · paddingX 8 · radius 4
paddingY 12 · paddingX 18 · radius 12
showArrow false
delayMs 0
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for TooltipX
The hint is one short line of text.
It should appear on hover and on keyboard focus alike.
The trigger is an existing element you do not want to rebuild.
A small icon helps carry the meaning.
Reach for something else
The tip needs its own layout or interactive content — use HoverCardX.
It must open on click rather than hover.
The content is long enough to need reading rather than glancing.
Io — UI Basics
Every trigger above is wired to a live TooltipX instance. The tip is only rendered on hover or focus, which a static page cannot capture.