Truncated

Importing

import { Truncated } from '@customerio/pluma-components/react';

Usage

The Truncated component is designed to handle text that might be too long for its container. It intelligently displays a tooltip only when text is actually truncated, providing a clean user experience.

Short text behavior

When text fits within the container, no tooltip will appear on hover:

Tooltip placement

You can control where the tooltip appears relative to the text using the tooltipPlacement prop:

Tooltip Content

By default, the tooltip will display the same content as the component's children. You can override this behavior with the tooltip prop:

This is particularly useful when your content includes links or formatting that shouldn't be duplicated in the tooltip:

Best practices

• The tooltip prop is optional - if not provided, the component will use its children as the tooltip content
• Use a custom tooltip prop when your content includes elements that shouldn't be duplicated in the tooltip (like links or special formatting)
• Set a fixed width on the container to ensure truncation works properly
• Use the component for simple text content that needs to save space
• For more complex content that shouldn't be truncated, consider using a different approach such as expandable sections or modals