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

Basic

Live preview

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

App.tsx

tsx

1import { Button, Tooltip } from 'omverse-ui'
2 
3<Tooltip content="Create a new item">
4  <Button variant="outlined">New item</Button>
5</Tooltip>
6 
7<Tooltip content="Delete this record">
8  <Button variant="outlined" color="error">Delete</Button>
9</Tooltip>
10 
11<Tooltip content="Share with your team">
12  <Button variant="outlined">Share</Button>
13</Tooltip>

Positions

Live preview

top (default), right, bottom and left

App.tsx

tsx

1<Tooltip content="Tooltip on top"    position="top">
2  <Button variant="outlined" size="sm">Top</Button>
3</Tooltip>
4<Tooltip content="Tooltip on right"  position="right">
5  <Button variant="outlined" size="sm">Right</Button>
6</Tooltip>
7<Tooltip content="Tooltip on bottom" position="bottom">
8  <Button variant="outlined" size="sm">Bottom</Button>
9</Tooltip>
10<Tooltip content="Tooltip on left"   position="left">
11  <Button variant="outlined" size="sm">Left</Button>
12</Tooltip>

Variants

Live preview

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

App.tsx

tsx

1<Tooltip content="Dark tooltip (default)" variant="dark">
2  <Button variant="outlined" size="sm">Dark</Button>
3</Tooltip>
4<Tooltip content="Light tooltip" variant="light">
5  <Button variant="outlined" size="sm">Light</Button>
6</Tooltip>
7<Tooltip content="Primary tooltip" variant="primary">
8  <Button variant="outlined" size="sm">Primary</Button>
9</Tooltip>

With keyboard shortcut

Live preview

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

App.tsx

tsx

1import { IconButton, Tooltip } from 'omverse-ui'
2 
3<Tooltip content="Save document" shortcut="⌘S">
4  <Button variant="outlined" size="sm">Save</Button>
5</Tooltip>
6<Tooltip content="Undo last action" shortcut="⌘Z">
7  <Button variant="outlined" size="sm">Undo</Button>
8</Tooltip>
9<Tooltip content="Search everything" shortcut="⌘K">
10  <IconButton icon="search" aria-label="Search" />
11</Tooltip>

Rich tooltip

Live preview

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

App.tsx

tsx

1<Tooltip
2  title="Design tokens"
3  content="Tokens are the atomic values that define your design system."
4  actionLabel="Learn more"
5  maxWidth={220}
6>
7  <Button variant="outlined" size="sm">Rich tooltip</Button>
8</Tooltip>

On a disabled element

Live preview

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

App.tsx

tsx

1<Tooltip content="You need edit permission to perform this action">
2  <Button disabled>Delete record</Button>
3</Tooltip>

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