Tooltip

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

Overview

Resources

Changelog

Source code

Storybook

Figma

Install

yarn add @camp/tooltip

Props

Prop	Type	Default	Description
`content` *	`ReactNode`	—	The content within the tooltip
`contentHeavy`	`boolean`	`false`	Optionally render more content in the Tooltip, this will add some additional padding Explicitly set `contentHeavy` to false
`placement`	`"top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end"`	`bottom`	Placement location of the tooltip (defaults to bottom) - Floating UI
`appearance`	`"light" \| "dark"`	`APPEARANCE.DARK`	Appearance of the tooltip
`usePortal`	`boolean`	`true`	Optionally render the tooltip in a portal
`role`	`"menu" \| "listbox" \| "tree" \| "grid" \| "dialog" \| "tooltip" \| "alertdialog" \| "select" \| "label" \| "combobox"`	`tooltip`	If your reference element does not have its own label use 'tooltip' If your reference element does not have its own label (e.g. an icon), use 'label'
`disablePopover`	`boolean`	`false`	Disable the tooltip popover if true
`maxWidth`	`MaxWidth<string \| number>`	—	Maximum width of the tooltip
`persistOnHover`	`boolean`	—	Persist the tooltip in the hover state without mouse events
`contentHeavyAction`	`FC<{}>`	—	If `contentHeavy` is `true`: optionally render a component within the action section of the tooltip `contentHeavyAction` should not be available if `contentHeavy` is false
`alwaysOpen`	`boolean`	—	Forces the tooltip into its hover state without mouse events
`arrowProps`	`RefAttributes<SVGSVGElement>`	—	Optionally pass props for the arrow element

Generated from @camp/tooltip@6.15.0 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

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>;

Production Examples

More states from @camp/tooltip's visual test stories, ranked by production usage. Variations already documented above are not repeated here.

Dark Persist On Hover

import { Tooltip } from '@camp/tooltip';
 
<Tooltip
  appearance="dark"
  content="I am a tooltip that persists on hover"
  persistOnHover
>
  {<Button appearance="primary">Dark tooltip should persist on hover</Button>}
</Tooltip>

Dark Use Portal

import { Tooltip } from '@camp/tooltip';
 
<Tooltip
  appearance="dark"
  content="I am a tooltip that renders in a portal"
>
  {<Button appearance="primary">Dark tooltip should use portal</Button>}
</Tooltip>

Dark

import { Tooltip } from '@camp/tooltip';
 
<Tooltip
  appearance="dark"
  content="I am a dark tooltip"
>
  {<Button appearance="primary">Hover for dark tooltip</Button>}
</Tooltip>

Light Max Width

import { Tooltip } from '@camp/tooltip';
 
<Tooltip
  appearance="light"
  content="I am a tooltip with a maxWidth of 75px"
  maxWidth="75px"
>
  {<Button appearance="primary">Light Tooltip with maxWidth</Button>}
</Tooltip>

Light Persist On Hover

import { Tooltip } from '@camp/tooltip';
 
<Tooltip
  appearance="light"
  content="I am a tooltip that persists on hover"
  persistOnHover
>
  {<Button appearance="primary">Light tooltip should persist on hover</Button>}
</Tooltip>

Light Use Portal

import { Tooltip } from '@camp/tooltip';
 
<Tooltip
  appearance="light"
  content="I am a tooltip that renders in a portal"
>
  {<Button appearance="primary">Light tooltip should use portal</Button>}
</Tooltip>

5 more variations in Storybook

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.