Tooltip

Tooltips are triggered on hover. They provide additional information about an element, oftentimes providing context to an icon.

Overview

Resources

Install


yarn add @camp/tooltip

Variations

Dark Appearance

By default, tooltips have a dark appearance. This is the most common tooltip style, used over light backgrounds.


import { Tooltip } from '@camp/tooltip';
import { AcGlyphMedium } from '@camp/icon';
 
<Tooltip appearance="dark" content="I am a tooltip" placement="bottom" usePortal>
  <div>
    <AcGlyphMedium />
  </div>
</Tooltip>;

Light Appearance

When a tooltip shows over top of a dark or bright background, the appearance can be set to light.


import { Tooltip } from '@camp/tooltip';
import { InfoCircleMedium } from '@camp/icon';
 
<Tooltip appearance="light" content="I am a tooltip" placement="bottom" usePortal>
  <div>
    <InfoCircleMedium />
  </div>
</Tooltip>;

Placement

There are four placement options available for the tooltip: bottom, top, left, and right. By default, the tooltip will have a bottom placement. The tooltip will intelligently reposition itself to remain on the screen.


import { Tooltip } from '@camp/tooltip';
import { AcGlyphMedium } from '@camp/icon';
 
<Tooltip appearance="dark" content="I am a tooltip" placement="right" usePortal>
  <div>
    <AcGlyphMedium />
  </div>
</Tooltip>;

Content Heavy

For situations with rich content, use the contentHeavy prop. Content-heavy tooltips enable explicit actions and more directly within the tooltip. Use persistOnHover to allow the tooltip to stay open while the user hovers over the tooltip content.


import { Tooltip } from '@camp/tooltip';
import { AcGlyphMedium } from '@camp/icon';
 
<Tooltip
  appearance="light"
  content={<span>Rich tooltip content</span>}
  contentHeavy
  persistOnHover
  placement="top"
  usePortal
>
  <div>
    <AcGlyphMedium />
  </div>
</Tooltip>;

Max Width

By default, the max width of the tooltip is 200px and the content wraps appropriately. For situations where this needs to be overridden, use maxWidth to set a custom max width.


import { Tooltip } from '@camp/tooltip';
import { AcGlyphMedium } from '@camp/icon';
 
<Tooltip
  maxWidth="600"
  appearance="dark"
  content="I am a very long tooltip. I am useful if there is a long string of text."
  placement="right"
  usePortal
>
  <div>
    <AcGlyphMedium />
  </div>
</Tooltip>;

Usage

Best Practices

Use tooltips to provide additional context for icons or abbreviated content
Keep tooltip content concise and informational
Do not use tooltips for critical information that must always be visible
Use contentHeavy when the tooltip needs to contain actionable content or links
Set persistOnHover when using contentHeavy so users can interact with the tooltip content
Use the role="label" prop when the tooltip serves as the accessible name for its trigger (e.g., icon-only buttons)

Content Guidelines

✅ DO

Keep tooltip text short and to the point
Use tooltips to clarify the purpose of icons or controls
Use sentence case for tooltip content
Provide helpful context that is not available elsewhere on the page

🚫 DON’T

Don’t use tooltips for essential information the user must see
Don’t put long paragraphs of text inside a tooltip
Don’t use tooltips as a replacement for proper labeling
Don’t rely on tooltips for mobile users, as hover is not available

Accessibility

Keyboard Support

Tooltip appears when the trigger element receives focus via Tab key
Tooltip dismisses when pressing the Escape key
For contentHeavy tooltips with persistOnHover, users can tab into the tooltip content to interact with links or actions

Labels

The tooltip uses role="tooltip" by default, associating the tooltip content with its trigger via aria-describedby
Use role="label" when the tooltip provides the accessible name for its trigger element (e.g., icon-only buttons without visible text). This uses aria-labelledby instead of aria-describedby

Similar Components

Popover

A transient view that shows on top of other content onscreen when requested.