Tooltip in the Socra UI system.
@socra/theme-mui themes MuiTooltip.
| State | Theme path | Rule |
|---|---|---|
Default | theme.palette.text.primary | Clear, enabled, and ready. |
Hover | theme.palette.action.hover | Pointer feedback only. |
Selected | theme.palette.action.selected | Persistent chosen state. |
Loading | theme.palette.action.disabledBackground | Show honest work underway. |
Disabled | theme.palette.action.disabled | Unavailable until the cause is resolved. |
Primary action role.
Working surface role.
Primary text role.
Spacing role.
Shape role.
These are theme references and component recipes by name. Toggle dark mode to verify the same names resolve to the active theme.
MUI component overrides owned by @socra/theme-mui: button roundness, list row treatment, dialogs, chips, tooltips, and paper surfaces.
Avatar component override exists.
Button component override exists.
Button Group component override exists.
Checkbox component override exists.
Card component override exists.
Chip component override exists.
Dialog component override exists.
Divider component override exists.
Drawer component override exists.
Floating Action Button override exists.
Icon Button component override exists.
Link component override exists.
List item overrides exist.
Menu component override exists.
Paper component override exists.
Radio Button component override exists.
Tab component override exists.
Text Field override exists.
Tooltip component override exists.
Typography override exists.
Use Tooltip through the shared Socra UI stack so every product stays standardized.
Shared implementation exists in the current UI/theme libraries.
Every visible value comes from @socra/theme or a themed MUI primitive.
The page becomes complete only when the live state matrix and copy-paste recipe are real.
The system improves once and every product inherits the fix.
A component earns a place only when it helps the user decide, act, recover, or understand.
Local UI creates drift; library contracts create standardization.
A local primitive splits behavior and future migrations.
Values live in @socra/theme and are consumed by name.
If the hierarchy is weak, fix the hierarchy.
<Stack spacing={2}>
<LazyLiveExample kind="Tooltip" />
</Stack>