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.

<Box style={{ width: '200px' }}>
  <Truncated>
    This is a long piece of text that will be truncated and show a tooltip on hover.
  </Truncated>
</Box>

Short text behavior

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

<Box style={{ width: '200px' }}>
  <Truncated>
    Short text
  </Truncated>
</Box>

Tooltip placement

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

<Box style={{ width: '200px' }}>
  <Truncated 
    tooltipPlacement="top"
  >
    This is a long piece of text with the tooltip appearing above it.
  </Truncated>
</Box>

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:

<Box style={{ width: '200px' }}>
  <Truncated tooltip="Custom tooltip text">
    This text will be truncated but the tooltip will show different content.
  </Truncated>
</Box>

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

<Box style={{ width: '200px' }}>
  <Truncated tooltip="Click to visit Customer.io website">
    Visit our <a href="https://customer.io">website</a> for more information.
  </Truncated>
</Box>

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