Tooltip

A dark label that points back at what it names - 109 by 28, four sides, and an arrow that is half a rotated square.

One component, four sides

Using the Tooltip

Why is Side the only axis?
Because it is the only thing that changes. The box, the type, the padding and the colours are identical in all four variants - what moves is the arrow, from one edge to another. That is the right shape for a component whose whole job is to point at something: the axis is about placement, not appearance.
How is the arrow drawn?
As a 10 × 10 rectangle turned 45 degrees with its centre sitting exactly on the edge of the box, so half of it shows as a triangle and half hides behind the fill. Only the corner that points carries a radius, at 2 - the other three sit on or behind the edge of the box, and rounding those would notch the arrow where it joins the fill. Which corner that is follows the side: a square turned 45 degrees sends its top-left corner up, its top-right right, its bottom-right down and its bottom-left left. The consequence in Penpot is that the arrow is an absolute child: resize the tooltip and it has to be put back by hand.
What is the hidden Kbd Group for?
Naming the keystroke the tooltip is describing. Every variant carries a two-key Kbd Group that is switched off, parked immediately past the label with the same 8 of gap the usage frame uses, so revealing it puts it in the right place and only the box has to grow; reveal it on an instance and the label reads Print document with Command and P beside it. The keys are real Kbd instances, so a change to Kbd reaches every tooltip that names a shortcut. It is the one job a tooltip does better than anything else in the kit.
What colours does it use?
base.primary for the box and base.primary-foreground for the type, which gives a near-black label with near-white text. Worth knowing that the source uses foreground and background instead. The picture is identical today; the difference shows up the moment you repoint primary to a brand colour, at which point every tooltip in the kit turns that colour.
How long should the label be?
One line, two at the outside - the file's wrapping example is 280 × 44, which is two lines at 12/16. Past that you have written a paragraph that disappears when the pointer moves, and a reader who needs a paragraph needs it to stay on the page. Put it in the layout instead.
What is missing from the file?
The timing and the animation, both of which are behaviour rather than drawing. The source opens after a delay set once on a provider, then fades and zooms in from 95% with a slide from whichever side it is on. The delay is the difference between a helpful label and a page that flickers whenever the pointer crosses it, so decide it once for the whole app.
Can I put one on a disabled button?
Not directly. A disabled button fires no pointer events, so the tooltip never opens, and it takes no focus either, so a keyboard user cannot reach it at all. Wrapping the button in the trigger fixes the hover case and not the keyboard one. If the reason a control is disabled matters, put it on the page as text - the tooltip may repeat it, but it must not be the only copy.
Does it replace an aria-label?
No. A tooltip is a hover and focus affordance; assistive technology needs the name whether or not anything is hovered. An icon button gets an aria-label and a tooltip, and the two usually say the same words. Dropping the label because the tooltip is there is the most common way an icon toolbar becomes unusable.
Does it work right to left?
The box does - even padding, symmetrical radius, centred arrow, and copy that flips on its own with dir. The Side axis is the part that needs thought: Left and Right are physical, and a tooltip on the Right of its trigger is on the reading side in English and the trailing side in Arabic. Ask for start and end in code and let the positioning mirror them. Collision flipping overrides all of it anyway - a tooltip near an edge takes the opposite side, which is a runtime decision no variant can hold.