Tooltip
An action button with hover/focus help and optional shortcut display.@gemologic/sheen · overlaysPlayground
<Tooltip content="Save the workspace" shortcut={{ keys: "mod+s", scope: "global", label: "Save workspace", group: "Editing" }} variant="outline" loading={false} placement="top" size="md" tone="neutral" type="button" variant="ghost">Save</Tooltip>Variant matrix
Save hint
type: button
type: submit
type: reset
placement: top
placement: bottom
placement: left
placement: right
variant: solid
variant: soft
variant: outline
variant: ghost
variant: link
tone: neutral
tone: accent
tone: danger
tone: success
size: xs
size: sm
size: md
size: lg
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Tooltip.tsx- Tokens
--sheen-button-radius--sheen-control-h-md--sheen-color-accent--sheen-color-bg-raised--sheen-elevation-raised--sheen-duration-fast
Accessibility
Role: tooltipKeyboard: Tab, Shift+Tab, Escape, Enter, SpaceDo
- Provide a visible label or aria-label on the native trigger.
Do not
- Do not nest a button inside Tooltip or put interactive controls in its content.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
type | "button" | "submit" | "reset" | undefined | button | Native action, submission, or reset behavior. |
content * | string | — | Noninteractive supporting text; never a replacement for the trigger's accessible name. |
shortcut | string | ShortcutAction | undefined | — | A string displays a hint only; a typed shortcut action also registers the trigger and displays its platform-formatted binding. |
placement | "top" | "bottom" | "left" | "right" | undefined | top | Preferred side, with viewport collision handling. |
openDelay | number | 500 | Hover opening delay in milliseconds; keyboard focus opens immediately. |
closeDelay | number | 100 | Pointer departure delay in milliseconds, preserving a hoverable path to the content. |
variant | NonNullable<"solid" | "soft" | "outline" | "ghost" | "link" | undefined> | undefined | ghost | Visual treatment; solid accent actions should be rare. |
tone | NonNullable<"neutral" | "accent" | "danger" | "success" | undefined> | undefined | neutral | Semantic color role, independent of visual treatment. |
size | NonNullable<"xs" | "sm" | "md" | "lg" | undefined> | undefined | md | Density-aware control size. |
loading | false | true | undefined | false | Marks pending work and disables activation. |