Tooltip

Small informational popups that appear on hover or focus, providing additional context, help text, or descriptions for UI elements.

This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Tokens

Standardized design system values that define consistent visual properties across tooltip components. These tokens ensure visual coherence while enabling flexible theme customization and brand adaptation for contextual information and guidance interfaces.

Theming Tokens

Design tokens organized by category with color-coded labels indicating their scope and impact level. Each token includes detailed specifications with values, usage guidelines, and customization options for comprehensive tooltip styling and behavior control.

Legend:

Granular tokens that affect only this component.
Granular tokens that affect other components.
Semantic tokens that affect the whole application.
Base tokens that affect the whole application.

Color

Color tokens are listed for the default context variant only. Other context variants follow the same token pattern with variant-specific color values.

context:: default

Component Token	Base Token
color.context.default.fg-inverse	{color.base.context.light.default.fg-inverse}
color.context.default.bg-inverse	{color.base.context.light.default.bg-inverse}

Typography

Component Token	Value
font.text.small.normal	fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.normal}, lineHeight": {typography.lineHeight.text.small}, fontSize: {typography.fontSize.text.small}, letterSpacing: {typography.letterSpacing.text.base}, paragraphSpacing": {typography.paragraphSpacing.text.base}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}
font.text.small.strong	fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.strong}, lineHeight": {typography.lineHeight.text.small}, fontSize: {typography.fontSize.text.small}, letterSpacing: {typography.letterSpacing.text.base}, paragraphSpacing": {typography.paragraphSpacing.text.base}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}

Spacing

Component Token	Base Token
space.context.xsmall	{size.unit.8}
space.context.2xsmall	{size.unit.4}

Border Radius

Component Token	Base Token
borderRadius.tooltip.main	{borderRadius.context.small}

Box Shadow

Component Token	Base Token
shadow.tooltip.main	{shadow.elevation.default.40}