Tooltip
A small floating label shown on hover or focus. It is the smallest overlay in the system and the one that fires most often, so it gets the shortest motion budget of any panel: it arrives on the swap spring over 219ms — 8px out from its trigger, scaled to 0.90, under 5px of blur that resolves to 0 — and leaves in 160ms on a tween, travelling half as far.
import { Tooltip, TooltipTrigger, TooltipContent } from "@pestoui/core"On an icon button
All four sides
side steers three things at once: which edge the tooltip sits on, which direction the 8px slide comes in from, and where the transform-origin lands. The origin is measured against the trigger rather than pinned to the tooltip's own centre, so the panel appears to grow out of the control it describes instead of inflating in place. Hover each of the four and watch the corner the growth starts from follow the side.
Enter vs exit asymmetry
Arrival and dismissal are not mirror images. The tooltip enters on a spring over 219ms from 8px away, scaled to 0.90, under 5px of blur; it leaves on ease-out-expo over 160ms toward 4px, scaled to 0.94, under 3px. Shorter in time and in distance, because by the time a tooltip is dismissed the reader has already moved on — a spring keeps re-settling after that decision is made, which reads as the interface lagging behind the pointer rather than as physics. Click either button to open both, then click again to dismiss both. The right-hand tooltip keeps the shipped exit curve but stretches it to the panel spring's 443ms; nothing else about the two differs, so the cost of a long exit is the only variable.
Props
Pesto UI · 117 documented components