ComponentsFeedbackTooltip

Tooltip

Contextual information shown on hover and focus. Supports 4 positions, 3 variants, keyboard shortcuts and rich content.

4 positions3 variantsKeyboard shortcutRich contentWorks on disabled

Overview

Contextual information shown on hover and focus. Supports 4 positions, 3 variants, keyboard shortcuts and rich content.

Descriptive tooltips

Live preview

Hover or focus each trigger to reveal a short explanation.

TooltipExample.tsx
tsx
import { Button, Tooltip } from 'omverse-ui'
 
<Tooltip content="Create a new item">
<Button variant="outlined">New item</Button>
</Tooltip>
 
<Tooltip content="Delete this record">
<Button variant="outlined" color="error">Delete</Button>
</Tooltip>
 
<Tooltip content="Share with your team">
<Button variant="outlined">Share</Button>
</Tooltip>

Use tooltips to clarify unfamiliar controls, never to hide essential instructions or information required to complete a task.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Tooltip when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

Basic

Live preview

Hover any trigger to see the tooltip — works on hover and keyboard focus

App.tsx
tsx
import { Button, Tooltip } from 'omverse-ui'
 
<Tooltip content="Create a new item">
<Button variant="outlined">New item</Button>
</Tooltip>
 
<Tooltip content="Delete this record">
<Button variant="outlined" color="error">Delete</Button>
</Tooltip>
 
<Tooltip content="Share with your team">
<Button variant="outlined">Share</Button>
</Tooltip>

Positions

Live preview

top (default), right, bottom and left

App.tsx
tsx
<Tooltip content="Tooltip on top" position="top">
<Button variant="outlined" size="sm">Top</Button>
</Tooltip>
<Tooltip content="Tooltip on right" position="right">
<Button variant="outlined" size="sm">Right</Button>
</Tooltip>
<Tooltip content="Tooltip on bottom" position="bottom">
<Button variant="outlined" size="sm">Bottom</Button>
</Tooltip>
<Tooltip content="Tooltip on left" position="left">
<Button variant="outlined" size="sm">Left</Button>
</Tooltip>

Variants

Live preview

dark (default, high contrast), light (for dark backgrounds) and primary (brand colored)

App.tsx
tsx
<Tooltip content="Dark tooltip (default)" variant="dark">
<Button variant="outlined" size="sm">Dark</Button>
</Tooltip>
<Tooltip content="Light tooltip" variant="light">
<Button variant="outlined" size="sm">Light</Button>
</Tooltip>
<Tooltip content="Primary tooltip" variant="primary">
<Button variant="outlined" size="sm">Primary</Button>
</Tooltip>

With keyboard shortcut

Live preview

shortcut renders in a monospace badge inside the tooltip — useful for command palette hints

Search
App.tsx
tsx
import { IconButton, Tooltip } from 'omverse-ui'
 
<Tooltip content="Save document" shortcut="⌘S">
<Button variant="outlined" size="sm">Save</Button>
</Tooltip>
<Tooltip content="Undo last action" shortcut="⌘Z">
<Button variant="outlined" size="sm">Undo</Button>
</Tooltip>
<Tooltip content="Search everything" shortcut="⌘K">
<IconButton icon="search" aria-label="Search" />
</Tooltip>

Rich tooltip

Live preview

title adds a bold heading, actionLabel adds a clickable link — use maxWidth for long content

App.tsx
tsx
<Tooltip
title="Design tokens"
content="Tokens are the atomic values that define your design system."
actionLabel="Learn more"
maxWidth={220}
>
<Button variant="outlined" size="sm">Rich tooltip</Button>
</Tooltip>

On a disabled element

Live preview

Wrap a disabled button — the Tooltip handles pointer events by wrapping in a span

App.tsx
tsx
<Tooltip content="You need edit permission to perform this action">
<Button disabled>Delete record</Button>
</Tooltip>

Props / API

Api Props

Props

PropTypeDefaultDescription
contentReactNode—Tooltip content — string for simple text, ReactNode for rich tooltips
position'top' | 'bottom' | 'left' | 'right''top'Position of the tooltip relative to the trigger
variant'dark' | 'light' | 'primary''dark'Visual style — dark (default), light or primary (brand colored)
shortcutstringundefinedKeyboard shortcut shown in a monospace badge inside the tooltip
titlestringundefinedBold title shown above content — for rich tooltips
actionLabelstringundefinedAction link text shown inside the tooltip
onAction() => voidundefinedCallback fired when the action link is clicked
delaynumber0Delay in ms before the tooltip appears
maxWidthnumberundefinedMax width for rich tooltips with long content
disabledbooleanfalsePrevents the tooltip from appearing