AI Tooltip

Overview

Resources

Install


yarn add @camp/ai-tooltip

Variations

Default appearance

The default tooltip provides essential information with a clean, minimal design.


import { AiTooltip } from '@camp/ai-tooltip';
import { AiButton } from '@camp/ai-button';
 
<AiTooltip
  content={() => 'This is a default tooltip with hover trigger'}
  placement="top"
  trigger="hover"
>
  <TestButton>Hover me for tooltip</TestButton>
</AiTooltip>;

Compact appearance

The compact tooltip is ideal for space-constrained interfaces where you need to provide information without taking up too much visual space.


import { AiTooltip } from '@camp/ai-tooltip';
import { AiButton } from '@camp/ai-button';
 
<AiTooltip content={() => 'Compact tooltip'} appearance="compact" placement="top" trigger="hover">
  <AiButton>Compact tooltip</AiButton>
</AiTooltip>;

Different triggers

AI Tooltips support multiple trigger types to accommodate different interaction patterns in AI interfaces.


import { AiTooltip } from '@camp/ai-tooltip';
import { AiButton } from '@camp/ai-button';
 
<AiTooltip content={() => 'This tooltip appears on click'} trigger="click" placement="top">
  <AiButton>Click me for tooltip</AiButton>
</AiTooltip>;

Custom placement

AI Tooltips can be positioned in various locations around the trigger element to ensure optimal visibility and user experience.


import { AiTooltip } from '@camp/ai-tooltip';
import { AiButton } from '@camp/ai-button';
 
<AiTooltip placement="left" content={() => 'Tooltip on the left'}>
  <AiButton>Tooltip on the left</AiButton>
</AiTooltip>;

Usage

Best practices

Use tooltips to provide additional context for AI features and functionality
Keep tooltip content concise and actionable
Choose the appropriate trigger based on user interaction patterns
Position tooltips to avoid covering important interface elements
Use compact appearance for space-constrained layouts
Ensure tooltip content is accessible and screen reader friendly

Content guidelines

✅ DO

Provide clear, helpful information that enhances user understanding
Use concise language that explains AI features or functionality
Include actionable guidance when appropriate
Position tooltips to avoid blocking other interface elements

🚫 DON’T

Don’t use tooltips for critical information that should be visible
Avoid overly technical jargon that might confuse users
Don’t make tooltips too long or complex
Don’t use tooltips as a replacement for proper interface design

Accessibility

Keyboard support

Tooltips with trigger="focus" are accessible via keyboard navigation
Users can tab to focusable elements with tooltips
Tooltip content is announced to screen readers
Escape key can dismiss tooltips when appropriate

Tooltip content is properly announced to assistive technologies
The relationship between trigger and tooltip is clearly established
Tooltip state changes are communicated to screen readers

Replacing this component in ACF App

The AI Tooltip component is designed to replace existing tooltip implementations in the ACF App using path aliases like @/components/tooltip.

Before (existing implementation)


import { Tooltip } from '@/components/tooltip';
 
<Tooltip content="Helpful information" placement="top">
  <InfoIcon />
</Tooltip>;


import { AiTooltip } from '@camp/ai-tooltip';
 
<AiTooltip content={() => 'Helpful information'} placement="top">
  ...
</AiTooltip>;

Breaking changes

Component name: Tooltip → AiTooltip
Content prop: content now expects a function that returns ReactNode instead of a string
Import path: Use @camp/ai-tooltip instead of path aliases
Appearance prop: New appearance prop with “default” and “compact” options
Trigger prop: Enhanced trigger options with better AI interface support