Tooltip

<Tooltip>TailwindCSS Modules

A floating label that describes an element on hover or focus, providing additional context without cluttering the UI.

InstallationColoxo CLI
npx coloxo add tooltip --style coloxo-css
ES Module ImportPlayground / npm package
import { Tooltip } from '@coloxo/ui';

Design Tokens:

--cx-slate-900: #0F172A--cx-bg-primary: #FFFFFF--cx-radius-md: 8pxshadow: lg

1. Variant Matrix

Tooltips can have a dark (default) or light surface, and can optionally include supporting text.

Dark (Default)LightWith Supporting Text
States

2. Interactive Props Configurator

Show Supporting Text

Visual Render Canvas
tsx
<Tooltip  content="Add employee">  <Button size="sm">Hover me</Button></Tooltip>

3. Dark theme

Light tooltips invert in dark mode, while dark tooltips remain dark with adjusted borders.

4. Enterprise layout compositions

Tooltips are primarily used for icon buttons, truncated text, or disabled controls to explain 'why'.

Integrations

Accessibility

Radix UI Primitives

Built on Radix Tooltip, ensuring keyboard focus automatically triggers the tooltip without hover.

Escape to Dismiss

Users can press the Escape key to dismiss the tooltip while focus remains on the trigger.

Props

NameTypeDefaultDescription
contentReactNode—Primary tooltip text.
supportingTextReactNode—Secondary line below content.
variant"dark" | "light"darkSurface style.
side"top" | "right" | "bottom" | "left"topPlacement around trigger.
align"start" | "center" | "end"centerAlignment relative to trigger.
delayDurationnumber700Hover delay before showing.