Tooltip

A short label, or a small card with a title and description, shown on hover or keyboard focus. Eight tail placements, three sizes, light or dark.

DesignReactVuePrompts

Copy

Insert Tooltip

1

2

3

4

5

6

7

8

9

10

import { TooltipTrigger, FlatButton } from '@orvain/react';
 
<TooltipTrigger content="Insert tooltip" placement="top-center">
  <FlatButton label="Hover or focus me" />
</TooltipTrigger>
 
// Dark theme, with a title and description
<TooltipTrigger theme="dark" title="Keyboard shortcuts" content="Press ? to see all shortcuts.">
  <FlatButton label="Help" variant="secondary" />
</TooltipTrigger>

Add a light Orvain Tooltip, 2X-Small (24), placed top left with a tail, reading “Insert Tooltip”.

Orvain MCPIncluded with the library

When to use#

• To name an icon-only button: Copy, Archive, More actions.
• To show a keyboard shortcut or the full text of a truncated value.
• For one short, optional fact that is not needed to complete the task.

When not to use

• Use a Popover for interactive content, such as links, buttons or form fields, or for longer content.
• Use help text on the page for information people need to succeed, such as a field's format.

Anatomy#

States#

Source#

Preview – final code pending

The Tooltip is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published