CleenUI · Overlays · Tooltip

Tooltip

Hover-triggered text label with configurable delay, position, and arrow direction. Keyboard accessible.

storybook.cleenui.com
Open Storybook
Live preview

Interactive Tooltip preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About Tooltip

Tooltip is the lightweight hover-label primitive. Wrap any element, supply a string or short JSX label, and a small floating panel appears on hover or keyboard focus.

Configurable open and close delays prevent flickering as users move the pointer through dense UIs. The component respects reduced-motion preferences and is accessible by keyboard via focus events. For longer content or interactive elements, use Popover instead.

When to use it

  • Icon button labels ("Edit", "Delete", "Settings").
  • Truncated text expansion on long labels.
  • Help text on form-field labels.
  • Status indicator explanations.

Common props

Prop
Type
Description
content
ReactNode
Tooltip content.
placement
Placement
Preferred position.
openDelayMs
number
Delay before appearing.
closeDelayMs
number
Delay before hiding.
disabled
boolean
Suppress the tooltip without removing it from the DOM.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.